CSS Border Property to set Color, Width and Style

The CSS Border is used to define the outline of an html element and can be inherited from the parent container. The css border property is used frequently to set color, style and the width of an html element border.

The border can be set for all the four sides of an element using shorthand property or set individually for each sides as per the need.

Shorthand Property for CSS Border

The border property syntax is,

border: width style color;

1. Width is used to set the thickness of the border.  The width values are,

Width Value	Width Example
thin	This is thin border
medium	This is medium border
thick	This is thick border
units (like px, em etc)	This border width is of 10px
inherit	Border width is inherited from the parent container

2. Style is used to set how the border is displayed.  The style values are,

Style Value	Style Example
none	No border
hidden	Similar to no border except in case of border conflict resolution for table elements
dotted	This is dotted border
dashed	This is dashed border
solid	This is solid border
double	This is double border
groove	This is groove border
ridge	This is ridge border
inset	This is inset border
outset	This is outset border
inherit	Border style is inherited from the parent container

3. Color is used to set the color of a border. The color values are,

Color Value	Color Example
Color Name	red, blue, black etc
RGB Value	rgb(100,111,80)
Hex Code	#66ddde

Examples

border: 1px solid black;

border: 5px double blue;

border: thin dashed rgb(255, 0, 0);

border: 2px dotted green;

border: thick groove #21ABCD;

border: thick ridge #21ABCD;

border: 5px inset #D891EF;

border: 5px outset #D891EF;

border: 3px hidden red;

Set border for each side

The borders can be set individually using,

border-top: width style color;

border-bottom: width style color;

border-left: width style color;

border-right: width style color;

Note: The width, style and color property values will be the same as for “border” property except these properties will be applied only to the corresponding sides of the html element.

---

CSS also provides user with greater flexibility of setting the border properties individually. In this way we can set only those properties that are required. Let us see one by one.

1. Border Width

The border width is used to set the thickness of the border of an element. Similar to CSS Margin and CSS Padding the borders can be set for all the four sides of an element. The border width can be set in two ways. 1. Using the shorthand property to set width of all the borders in a single line. 2. Set the border width individually for all the four sides of an element.

Shorthand Property for Border Width

The syntax to set the border width of an element in a single line is,

border-width: top-value right-value bottom-value left-value;

Example

border-color: #E03C31;
border-style: dashed;
border-width: 1px thin medium thick;

Border Width Property for each side

The properties to set border width individually for all the four sides are,

border-top-width: value;

border-right-width: value;

border-bottom-width: value;

border-left-width: value;

Example

border-color: #FFA700;
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 10px;

2. Border Style

The border style is used to the set how the border is displayed. The border style can be set in two ways. 1. Using the shorthand property to set the style to all the four sides of an element in a single line. 2. Set the border style for each side individually of an element.

Shorthand Property for Border Style

The syntax to set the border style of an element in a single line is,

border-style: top-value right-value bottom-value left-value;

Border Style Property for each side

The properties to set border style individually for all the four sides are,

border-top-style: value;

border-right-style: value;

border-bottom-style: value;

border-left-style: value;

Example

border-width: medium;
border-color: #03C03C;
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;

3. Border Color

The border color property is used to set the color of the border of an html element. It can be set in two ways. 1. Using the shorthand property. 2. Set the border colors individually.

Shorthand Property for Border Color

The syntax to set the border color of an element in a single line is,

border-color: top-value right-value bottom-value left-value;

Border Color Property for each side

The properties to set border color individually for all the four sides are,

border-top-color: value;

border-right-color: value;

border-bottom-color: value;

border-left-color: value;

Example

border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: #6699CC;
border-left-color: #CD7F32

Note: When using shorthand property for border-width, border-style and border-color, they can have 4, 3, 2 or single parameter. The rules for using different number of parameters will be same as css margin and padding properties. It is recommended that you read css margins and css padding articles before reading the css borders to understand it better.

Summary

For your easy reference the css border properties we have discussed so far is summarized below in a table.

	Shorthand property	Width	Style	Color
Border Top	border-top: width style color;	border-top-width: value;	border-top-style: value;	border-top-color: value;
Border Right	border-right: width style color;	border-right-width: value;	border-right-style: value;	border-right-color: value;
Border Bottom	border-bottom: width style color;	border-bottom-width: value;	border-bottom-style: value;	border-bottom-color: value;
Border Left	border-left: width style color;	border-left-width: value;	border-left-style: value;	border-left-color: value;