border (CSS property)

Description

The shorthand property border sets the border-width, border-style, and border-color for all four sides of an element using the values specified. Unlike the shorthand margin property, you cannot set each border to a different width (or have different colors and styles for each border) using just the shorthand border property. To specify different values for each side, you’ll need to refer to the property values for the shorthand styles border-width, border-style, and border-color.

It’s also possible to be more specific, and apply an individual border-style, border-color, or border-width to a particular side. For example, to target the top border of an element you’d use the properties border-top-width, border-top-color, and border-top-style. (You can target other sides of the element in the same way, substituting “top” in the above property for “left,” “right,” or “bottom” as required.)

Borders are placed on top of the element’s background.

Value

Refer to the following individual properties for specific information on allowed and initial values: border-width, border-style, and border-color.

Negative length values are illegal.

As with most shorthand properties, you don’t need to specify all the properties listed, but any omitted properties will revert to their default values. In the case of border-style, if you omit a value no border will show at all, because the default value is none. A border will only be visible as long as the border-style property has been set to something other than none or hidden, or has been restated explicitly after the initial shorthand declaration. Otherwise, no border will show and the border-width will be reset to zero. Therefore, its good practice to specify a value for the border’s style when you’re using shorthand notation.

Compatibility

User agents are supposed to place borders on the element’s background, but in Internet Explorer for Windows versions up to and including 7, the background only reaches the inside edge of the border when the element has a layout. This means that for dotted or dashed borders, the background won’t be visible through the spaces within the border. When the element doesn’t have a layout, the background will extend under the borders.

When dotted borders are specified as the border-style, and the border’s width is only 1px, Internet Explorer for Windows versions up to and including 6 will display the borders as dashed instead of dotted. At a width of 2px and above, the dotted borders will display correctly. This glitch was fixed in Internet Explorer Version 7 for cases when all four sides are set to 1px. However, if one of the sides is set to 2px or more, the 1px dotted borders revert to dashed in IE7.

Internet Explorer for Windows versions up to and including 6 do not support transparent borders.

In Internet Explorer for Windows version 8 an element with a color defined does not inherit the border-color of its ancestor when using border-color inherit. (For test case see James Hopkins.)

Internet Explorer Windows version 8 still has problems with 1px dashed borders and will initially display the area between the borders as white instead of transparent. The borders revert to transparent after other page elements receive focus (such as tabbing to links in the page).

Internet Explorer for Windows versions up to and including 7:

• don’t support the value hidden
• don’t support the value inherit

In Chrome Versions 2 & 3 border-left and border-right dotted borders with a value of 1px do not display uniformly and merge in places to form a solid line.

The appearance of the borders may vary between user agents (within limits). The algorithms that define the relationship between the colors used to achieve an effect (for example, groove, ridge, inset, and outset) are not explicitly defined in the CSS specifications, so the colors may vary between user agents. In CSS2.1, the three-dimensional border styles (groove, ridge, inset, and outset) depend on the corresponding border-color, rather than on color.