Border properties draw different line styles around elements.

border-color, border-style, border-width

To display a border around an HTML element you have to define the fallowing properties: border-color, border-style, border-width.

border-color

The border-color property sets the color of the border.
  - Values: You can also set the border color to "transparent".
  - Syntax:

The "border-color" does not work if it is used alone. You need to use the "border-style" property to set the borders first.


• You can also set individual border color values for each side, with the fallowing properties:

border-style

The border-style property specifies what kind of border to display. You can define one of the fallowing values: - none specifies no border. In the image below you can see the effect of the other values:
css border-style
  - Syntax:
• You can also set individual border style values for each side, with the fallowing properties:

border-width

The border-width sets the size of the border.
The value of this property is set in pixels, or by one of the three pre-defined values: thin, medium, or thick.
  - Syntax:
• You can also set individual border width values for each side, with the fallowing properties:
  Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>border</title>
 <style type="text/css"><!--
 #idd {
  border-style: outset;
  border-width: 3px;
  border-color: blue;
 }
 --></style>
</head>
<body>
 <div id="idd">Free Web Development courses and resources.</div>
</body>
</html>
  - Result:
Free Web Development courses and resources

border

Using the border property you can shorten the code. It accept three values representing border-width, border-style, and border-color.
  - Syntax:
The CSS code from the above example can be rewritten like this (the effect is the same):
#idd { border: 3px outset blue; }

• You can also set border shorthand property values for each side, with the fallowing syntaxes:
  Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>border shorthand</title>
 <style type="text/css"><!--
 #idd {
  border-left: 4px outset red;
  border-right: 4px outset green;
  border-bottom: 2px dashed blue;
 }
 --></style>
</head>
<body>
 <div id="idd">CSS online course, free lessons.</div>
</body>
</html>
  - Result:
CSS online course, free lessons.

Annul /Remove border

To annul /remove border, use the none value.
In the following example it is set a border for all margins, then it is removed the bottom border.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>border shorthand</title>
 <style type="text/css"><!--
 #idd {
  border: 2px solid blue;
  border-bottom: none;
 }
 --></style>
</head>
<body>
 <div id="idd">CSS online course, free lessons.</div>
</body>
</html>
  - Result:
CSS online course, free lessons.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
CSS Border

Last accessed pages

  1. Bubbles3 (25640)
  2. Butterfly Kyodai (17500)
  3. Remove / Get duplicate array values - Reset array keys in PHP (6584)
  4. Math Mahjong Advanced (1084)
  5. Read Excel file data in PHP - PhpExcelReader (41426)

Popular pages this month

  1. Qwop (4726)
  2. Bubbles3 (4343)
  3. Butterfly Kyodai (3092)
  4. Zuma Deluxe (2868)
  5. Backgammon (1463)