Learn how to build and design websites with our tutorials.

CSS Border Tutorial

View Tutorial Contents


What Are Borders?

CSS borders are lines that appear between the margin and padding of an HTML element.


The Box Model

The image below shows you how the margin, padding, border and the HTML element fit together. This is referred to as the box model.

CSS Box Model


CSS Border Properties

The CSS border properties allow you to specify the style, width and color of an element's border.

You should specify the three border properties when setting borders.


CSS Border Styles

Both, the CSS longhand border-style property and the shorthand border allow you to set the style of an element's border.

The table below lists the values that the border-style property can have.

Property Values
border-style solid, dotted, dashed, double, groove, ridge, inset, outset

NOTE: The border-style property must be set in order for the other border properties to work.


CSS Border Widths

Both, the CSS longhand border-width property and the shorthand border property allow you to set the width of an element's border

The width of an element's border can be set in pixels, or by using one of three keyword values: thin, medium or thick.


CSS Border Colors

Both, the CSS longhand border-color property and the shorthand border property allow you to set the color of an element's border

NOTE: The border-style property must be set in order for the border color property to work.

The values that you can use to set the border color are listed below.

name This value is a color name, like "red"
RGB This value is an RGB value, like "rgb(255,0,0)"
hex This value is a hex color value, like "#ff0000"

If the border color is not set, it will be inherited from the color property of the element.


CSS Shorthand border Property

CSS border properties allow you to set the style, size and color of CSS borders in one declaration. This is the recommended way to set border styles. It is also recommended that you set all three border styles.

The CSS example below shows you how to set border styles using the shorthand border property.


.solid{
border: 2px solid red;
}
.dotted{
border: 2px dotted red;
}
.dashed{
border: 2px dashed red;
}
.double{
border: 2px double red;
}
.groove{
border: 2px groove red;
}
.ridge{
border: 2px ridge red;
}
.inset{
border: 2px inset red;
}
.outset{
border: 2px outset red;
}

This paragraph element has a solid border style.

This paragraph element has a dotted border style.

This paragraph element has a dashed border style.

This paragraph element has a double border style.

This paragraph element has a border style of groove.

This paragraph element has a border style of ridge.

This paragraph element has an inset border style.

This paragraph element has a outset border style.


Setting Individual Border Sides

The CSS border properties are listed below.

Property Description
border This property allows you to set all three border values in one declaration.
border-top This property allows you the three border values for the top border.
border-right This property allows you the three border values for the right border.
border-bottom This property allows you the three border values for the bottom border.
border-left This property allows you the three border values for the left border.