Skip to main content

Getting StartED with CSS

Border Properties

These properties control the color, style, and width of an element’s borders. Each side can be styled independently. Because there are so many options, the border properties have a large number of shorthand versions. For a border to display, you must specify at least the border-style property, or its equivalent in one of the shorthand properties. See Chapter 5 for a detailed description.

border-color

Accepted values:
One, two, three, or four color values or the keyword transparent
Default:
The color of the text in the current element
Inherited:
No

Shorthand property that lets you specify the color of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values, which are applied as follows:

border-style

Accepted values:
Up to four of the following keywords: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid
Default:
none
Inherited:
No

Shorthand property that lets you specify the style of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values. See border-color for an explanation of how the values are applied. The hidden keyword applies only to table borders.

Examples of different border styles

border-top, border-right, border-bottom, border-left

Default:
See individual properties
Inherited:
No

Shorthand properties that let you specify the color, style, and width of the selected border in a single declaration. The values can be specified in any order. If color and width are omitted, a medium border using the same color as the current element’s text is used. For the border to display, a style must be specified.

border-top-color, border-right-color, border-bottom-color, border-left-color

Accepted values:
A color value or the keyword transparent
Default:
The color of the text in the current element
Inherited:
No

Individual property that specifies the color of the selected border.

border-top-style, border-right-style, border-bottom-style, border-left-style

Accepted values:
dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid
Default:
none
Inherited:
No

Individual property that specifies the style of the selected border. The hidden keyword applies only to table borders.

Examples of border styles

border-top-width, border-right-width, border-bottom-width, border-left-width

Accepted values:
A percentage or size with a unit of measurement
Default:
medium
Inherited:
No

Individual property that sets the width of the selected border. Border width is added to the overall width of an element. Negative values are not permitted.

border-width

Accepted values:
Percentages or values with a unit of measurement
Default:
medium
Inherited:
No

Shorthand property that specifies the width of all four borders in a single declaration. Accepts a space-separated list of one, two, three, or four values. See border-color for an explanation of how the values are applied.

border

Default:
See individual properties
Inherited:
No

Shorthand property that lets you set the color, style, and width of all four borders in a single declaration. All sides must have the same values, which can be in any order. For the borders to display, you must specify at least one of the styles accepted by border-style.

To style borders individually, use the individual border properties or the border-color, border-style, and border-width shorthand properties.