border-right (CSS property)

Spec
Inherited Initial Version
No CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Buggy

Syntax

border-right: { [ border-width ]   [ border-style ]   [ border-color ] | inherit } ;

Description

The border-right shorthand property sets the border-right-width and/or border-right-style and/or border-right-color to the right side of an element simultaneously.

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

Example

This style rule assigns a 2px red border to the right-hand side of paragraphs within the element with ID "example":

#example p {
  border-right: 2px solid red;
}

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Buggy

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.

User-contributed notes

There are no comments yet.

Related Products