The Border Property

Border Property

The CSS border property creates a border around an element. Border is actually a shorthand property combining border-style, border-width, and border-color.

Border-style

This property defines the style used to create the border. One to four values must be provided. A single value will specify the style for all four borders. If two values are provided, the first value will specify the style for the top and bottom borders, while the second value will specify the style for the left and right borders. If three values are provided, the first value will specify the style for the top border, the second value will specify for the left and right borders, and the third will specify for the bottom border. If four values are provided, the browser will render the borders in order from top, right, bottom, and left.

Values include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, and inherit.

Border-width

This property defines the width of a border. One to four values must be specified. Note that a border-style should be declared prior to using border-width.

Values include thin, medium, thick, initial, inherit, and a length unit such as pixels or ems.

Border-color

The border-color property sets the color for an element's borders. One to four values are specified, in the same order used with border-style.

Values: transparent, initial, inherit, and color. Use any valid color code.

Border

The border property is a shorthand property combining border-style, border-width, and border-color.

Example

The following examples both do the same thing.

.box {
        border-style: solid;
        border-width: thin;
        border-color: black;
        }
        
.box {
        border: solid thin black;
        }

Other Border Properties

Each individual border may also be defined. The following are valid CSS properties and work just like those described above; however, these only impact the indicated border.