CSS border-style property

The Border properties are used to set the border of an element i.e. its width, color and style.

CSS Border-Style

The BORDER-STYLE property is used to specify the style of the border. The possible values are None (default), Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset and Hidden. For example:

p{border-style : dotted;}

You can also apply styles to each side of the border using BORDER-TOP-STYLE, BORDER-BOTTOM-STYLE, BORDER-LEFT-STYLE and BORDER-RIGHT-STYLE properties.

You can also specify individual styles of each side of border using BORDER-STYLE property at the same place. The values that appear in the border-style are in the order of Top, Right, Bottom, Left values. For example:

p{border-style : solid dashed solid dotted;}

CSS Border-Width

The BORDER-WIDTH property is used to specify the width of the border. The possible values that can be assigned to it are Thin, Medium, Thick or in terms of length. You cannot specify it in terms of percentage. For example:

p{border-style : solid;  Border-Width : 10px;  }

You can also apply border-width for top, bottom, right and left sides of the border using BORDER-TOP-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-RIGHT-WIDTH and BORDER-LEFT-WIDTH properties respectively. For example:

p{border-style:solid; border-right-width:20px;}

You can also specify individual width of each side of border using BORDER-WIDTH style property at the same place. The values that appear in it are in the order of their top, right, bottom and left side width values. For example:

p{border-style : solid;  Border-Width : 10px 20px 15px 5px;}

CSS Border-Color

The BORDER-COLOR property is used to specify the color of the border surrounding the element. Its values can be specified using color names, hexadecimal representation, rgb representation or shorthand hexadecimal notation. For example:

p{border-style : solid;  Border-Color: red;  }

As box consists of four borders top, bottom, left and right so you can set their color; individually using BORDER-TOP-COLOR, BORDER-BOTTOM-COLOR, BORDER-LEFT-COLOR and BORDER-RIGHT-COLOR properties respectively. For example:

p{border-style : solid;  
Border-Left-Color: blue;  
Border-Right-Color : green;  }

CSS Border

The BORDER property is a shorthand property in witch you can specify width, style and color in the order BORDER-WIDTH, BORDER-STYLE, and BORDER-COLOR. For example

P{border: 1px solid blue ;} 

You can also set the width, style and color for each side of the border individually in a single statement. In order to set the properties for left side we use BORDER-LEFT. For example

P{border-left : 1px solid blue ;}

Similarly you can set the width, style and color for right, top and bottom sides using BORDER· RIGHT, BORDER-TOP, BORDER-BOTTOM properties respectively.