CSS Border Properties

If you want to set all four widths at the same time, in format A B C and D as pictured above,the border-width property is used. The value can be thin, medium, thick, or a numeric value and unit, such as 5px or 0.2em.

In every paragraph if you want to a medium border around, you could use:

CSS Code

p { border-width: medium; }
/* This sets all to medium */
p { border-width: medium medium; }
/* This sets top/bottom medium then right/left medium */
p { border-width: medium medium medium medium; }
/* Set each A B C and D */

The default border is no border at all, if you want any border to visually appear, you'll need to add a second property, border-style. The values for border-style are: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

So let's make each paragraph have a medium border that is dotted:

CSS Code

p { border-width: medium; border-style: dotted; }

Font Variant

So close to getting our border perfect. But what if the border to be blue Simple. The border-color property is set to blue

p { border-width: medium; border-style: dotted; border-color: blue; }

Wouldn't it be nice to have a combination property? There is It's just border and it expects width, style, then color. So the example immediately above could be simplified to:

CSS Code

p { border: medium dotted blue; }

If you can set each of the four borders individually. The properties are border-top, border-right, border-bottom, and border-left. The values expected are width, style, then color. If you wanted every paragraph with a dotted left border in red, and a dashed right border in purple, you could use:

CSS Code

p { border-left: dotted red; border-right: dashed purple; }

The follwing table describe the border Properties:

Property	Description	values
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color
border-bottom-color	Sets the color of the bottom border	border-color
border-bottom-style	Sets the style of the bottom border	border-style
border-bottom-width	Sets the width of the bottom border	thin medium thick length
border-color	Sets the color of the four borders, can have from one to four colors	color
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color
border-left-color	Sets the color of the left border	border-color
border-left-style	Sets the style of the left border/td>	border-style
border-left-width	Sets the width of the left border	thin medium thick length
border-right	A shorthand property for setting all of the properties for the right border in one declaration	order-right-width border-style border-color
border-right-color	Sets the color of the right border	border-color
border-right-style	Sets the style of the right border	border-style
border-right-width	Sets the width of the right border	thin medium thick length
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color
border-top-color	Sets the color of the top border	border-color
border-top-style	Sets the style of the top border	border-style
border-top-width	Sets the witdth of the top border	thin medium thick length
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length