CSS Border

CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.

The border-style property specifies what kind of border to display. You can set the color, style and width of the borders around an element in one declaration by using the border property.

border-style values:
border: 1px solid #000000;

Values:

• color
• style
• width

Or you can set each property individually.

Border Color
The border-color property is used to set the color of the border. The color can be set by:

• color name
• hexadecimal number
• RGB color code
• transparent

Border Style
Borders can have the following styles.

<p style="border:2px solid blue;">This text has a border style of 'solid'.</p>
<p style="border:2px dotted blue;">This text has a border style of 'dotted'.</p>
<p style="border:2px dashed blue;">This text has a border style of 'dashed'.</p>
<p style="border:2px double blue;">This text has a border style of 'double'.</p>
<p style="border:2px groove blue;">This text has a border style of 'groove'.</p>
<p style="border:2px ridge blue;">This text has a border style of 'ridge'.</p>
<p style="border:2px inset blue;">This text has a border style of 'inset'.</p>
<p style="border:2px outset blue;">This text has a border style of 'outset'.</p>
<p style="border:2px hidden blue;">This text has a border style of 'hidden'.</p>

This results in:

This text has a border style of 'solid'.

This text has a border style of 'dotted'.

This text has a border style of 'dashed'.

This text has a border style of 'double'.

This text has a border style of 'groove'.

This text has a border style of 'ridge'.

This text has a border style of 'inset'.

This text has a border style of 'outset'.

This text has a border style of 'hidden'.

Border Width
You can set the width of a border independently with the border-width property.
border-width: value;

Values:

• Length
• Thin
• Medium
• Thick

Or you can set the elements for each borders side individually