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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
CSS Border

Last accessed pages

  1. Rollercoaster Creator (281)
  2. Svetlograd Zuma (5329)
  3. Frizzle Fraz (306)
  4. Zuma Games (18919)
  5. Action Games (9586)

Popular pages this month

  1. Qwop (4619)
  2. Drag Racer V3 (2240)
  3. Flash Games - Free online Games (1111)
  4. Bubbles3 (994)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)