CSS Reference Property

border

The border property is a shorthand property used to specify the width, style and color of the top, right, bottom, and left border of a box.

The border property is a shorthand property for setting the same width, color, and style for all four borders of a box.

Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

The border property can accept one, two or three arguments as a value—omitted values are set to their initial values.

Trivia & Notes

The border shorthand also resets border-image to its initial value. It is therefore recommended that you use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade. This will ensure that border-image has also been reset to allow the new styles to take effect.

Official Syntax

Syntax:

border: <line-width> || <line-style> || <color>

Initial: 0 none currentColor, which is the concatenation of the initial values of the long-hand properties.
Applies To: all elements
Animatable: The width and color of the border are animatable.

Values

<line-width>: The width of the element’s border. Refer to the border-width property entry for a list of possible values.
<line-style>: The style of the element’s border. Refer to the border-style property entry for a list of possible values.
<color>: The color of the element’s border. Refer to the border-color property entry for a list of possible values.

Examples

The following are all valid border values set on an element.

.element {
    border: 1em; /* style and color are set to their initial values */

    /* or */
    border: solid orange; /* width is set to its initial value (0), which means that no border will be set */

    /* or */
    border: 1px dotted #eee;

    /* or */
    border: 5px solid teal;
}

Live Demo

Here is a live demo. Play with the border property to see how it changes the looks of it:

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.