CSS Border

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.

border-color

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

- Values:

name - specify a color name (blue, green, ...).
RGB - specify a RGB value, like 'rgb(10,20,250)'.
Hex - A hex value (#0101ff , #a8feb8).

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:

border-top-color - sets the color of the top border
border-bottom-color - sets the color of the bottom border
border-left-color - sets the color of the left border
border-right-color - sets the color of the right border

border-style

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:

border-top-style - sets the style of the top border
border-bottom-style - sets the style of the bottom border
border-left-style - sets the style of the left border
border-right-style - sets the style of the right border

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:

border-width: value;

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

border-top-width - sets the size of the top border
border-bottom-width - sets the size of the bottom border
border-left-width - sets the size of the left border
border-right-width - sets the size of the right border

Example:

<style>
#idd {
border-style: outset;
border-width: 3px;
border-color: blue;
padding:3px;
}
</style>

<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:

border-top: width_val style_val color_val;
border-bottom: width_val style_val color_val;
border-left: width_val style_val color_val;
border-right: width_val style_val color_val;

Example:

<style>
#idd {
border-left: 4px outset red;
border-right: 4px outset green;
border-bottom: 2px dashed blue;
padding:3px;
}
</style>

<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.

<style>
#idd {
border: 2px solid blue;
border-bottom: none;
padding:3px;
}
</style>

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

<<-CSS Box Model -- CSS Outline->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

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();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

CSS Border

Css Course

border-color, border-style, border-width

border-color

border-style

border-width

Border Property

Annul /Remove border

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month