CSS Border Property Tutorials

Borders lie between the padding and margin of HTML elements. CSS border properties allow you to specify the width, style and color of an element's border.

Visual Representation of the Box Model Concept

The image below is a visual representation of the box model concept and where the border fits in.

css box model image

border-style Properties

The border-style properties specify the style of border that is used to be used. You can set the style of all 4 borders in 1 declaration or set the style of each border (top, right, bottom or left) individually.

There are 10 border styles that are supported in CSS. The border styles are listed below.

none defines no border
hidden hides the border
solid defines a solid borde
double defines 2 solid borders, both the same width as set using the border-width value
dotted defines a dotted border
dashed defines a dashed border
grooved defines a 3D grooved border
ridge defines a 3D ridged border
inset defines a 3D inset border
outset defines a 3D outset border

The CSS rules below show you how to specify border styles.

NOTE: In order for other border properties to work, the border-style properties must be set first.

p.none { border-style:none; } p.hidden { border-style:hidden; } p.solid { border-style:solid; } p.double { border-style:double; } p.dotted { border-style:dotted; } p.dashed { border-style:dashed; } p.groove { border-style:groove; } p.ridge { border-style:ridge; } p.inset { border-style:inset; } p.outset { border-style:outset; }

Styling Individual Border Sides

CSS allows you to specify the border style of each side of an HTML element.

The CSS rule below shows you how to specify the border style of each side of an HTML element.

p { border-top-style:solid; border-right-style:dotted; border-bottom-style:double; border-left-style:dashed; }

border-width Properties

The border-width property is used to set the width of the border of HTML elements.

The border-width property values can be set in pixels or setting one of 3 pre-defined values: thin, medium or thick.

NOTE: In order for border-width properties to work, the border-style properties must be set first.

The CSS rules below show you how to set the width of borders.

p.pixels { border-style:solid; border-width:5px; } p.predefined { border-style:solid; border-width:thick; }

How To Specify the Individual Width of Border Sides

The CSS rules below show you how to specify the individual width of each side.

p.top { border-style:solid; border-top-width:thick; } p.right { border-style:solid; border-right-width:normal; } p.bottom { border-style:solid; border-bottom-width:20px; } p.left { border-style:solid; border-left-width:5px; }

border-color Property

The border-color property is used to specify the color of the border.

Border color can be specified by using any color that is defined by RGB, hexadecimal or color key terms.

NOTE: In order for border-color properties to work, the border-style properties must be set first.

The CSS rules below shows you how to specify the color of the border.

p.key_word { border-style:solid; border-color:red; } p.hexadecimal { border-style:solid; border-color:#98bf21; } p.rgb { border-style:solid; border-color:rgb(250,0,255); }

The CSS rules below shows you how to specify the color of each individual border seperately.

p.top { border-style:solid; border-top-color:red; } p.right { border-style:solid; border-right-color:red; } p.bottom { border-style:solid; border-bottom-color:red; } p.left { border-style:solid; border-left-color:red; }

The CSS rule below shows you how to specify the color of each individual border in one declaration. The colors are specified going clockwise in this order: top, right, bottom and left. The top border will be red, the right border color will be green, the bottom color will be blue and the left border will be yellow.

p { border-style:solid; border-color:red green blue yellow; }