CSS Border properties draw different line styles around HTML elements.

border-color, border-style, border-width

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


The border-color property sets the color of the border.

- Values: You can also set the border color to transparent.
- Syntax:
border-color: value;

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:


The border-style property specifies what kind of border to display. You can define one of the fallowing values.

none, solid, dashed, dotted, double, groove, ridge, inset, outset
- none specifies no border.
In the image below you can see the effect of the other values:
css border-style - Syntax:
border-style: value;
• You can also set individual border style values for each side, with the fallowing properties:


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:
border-width: value;
• You can also set individual border width values for each side, with the fallowing properties:
#idd {
border-style: outset;
border-width: 3px;
border-color: blue;

<h4>Example CSS border-style, border-width, border-color</h4>
<div id='idd'>Free Web Development courses and resources.</div>

Border Property

Using the border property you can shorten the code. It accept three values representing border-width, border-style, and border-color.

- Syntax:
selector { border: width_val style_val color_val; }
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:
#idd {
border-left: 4px outset red;
border-right: 4px outset green;
border-bottom: 2px dashed blue;

<h4>Example border-left, border-right, border-bottom</h4>
 <div id='idd'>If the life is a dream, where and who is the dreamer?</div>

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.

#idd {
border: 2px solid blue;
border-bottom: none;

<h4>Example css border property</h4>
 <div id='idd'>Wake Up the Truth.</div>

Daily Test with Code Example

Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
CSS Border

Last accessed pages

  1. Simple Admin Login PHP Script (1674)
  2. PHP getElementById and getElementsByTagName (23092)
  3. Select in MySQL, Output results in HTML Table (6553)
  4. Insert, Select and Update NULL value in MySQL (33235)
  5. setTimeout and this with bind() method in JavaScript class (622)

Popular pages this month

  1. Contact page - CoursesWeb (1957)
  2. Tabs effect with CSS (1944)
  3. Insert, Select and Update NULL value in MySQL (1039)
  4. Read Excel file data in PHP - PhpExcelReader (833)
  5. PHP getElementById and getElementsByTagName (514)