Definition and Usage
The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.
- Initial the concatenation of the initial values of its longhand properties:
- border-right-width: medium
- border-right-style: none
- border-right-color: currentColor
- Applies to all elements
- Inherited no
- Media visual
- Computed Value as each of the properties of the shorthand:
- border-right-width: the absolute length or 0 if border-right-style is none or hidden
- border-right-style: as specified
- border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
- Animatable as each of the properties of the shorthand:
- Canonical order order of appearance in the formal grammar of the values
Syntax
Formal syntax: <br-width> || <br-style> || <color>
Values
- <br-width>
- See border-right-width.
- <br-style>
- See border-right-style.
- <color>
- See border-right-color.
Examples
The three component of a right borders can be defined: width, style and color.
.sample { border-right: 3px solid #000; }
The style can be set to any border-right-style value.
.sample { border-right: 3px dotted #000; }
The color can be set to any border-right-color value.
.sample { border-right: 3px solid #f00; }
The width can be set to any border-right-width value.
.sample { border-right: 1px solid #000; }
The values can be declared in any order.
.sample { border-right: blue solid 2px; }
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 4 | 3.5 | 1.0 (85) |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |