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 tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
CSS Border

Last accessed pages

  1. Action Games (3138)
  2. Bongo Balls (891)
  3. Backgammon (2418)
  4. Zuma Games (15107)
  5. Common PHP Errors and Solutions (5146)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (49507)
  2. Read Excel file data in PHP - PhpExcelReader (37896)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (36877)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (33252)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (30620)