Summary
The border-right-color
CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties border-color
or border-right
are more convenient and preferable.
Initial value | currentColor |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | 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 rgba(0,0,0,0) . |
Animation type | a color |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
border-right-color: red; border-right-color: rgb(255, 128, 0); border-right-color: hsla(100%, 50%, 25%, 0.75); border-right-color: #ffbb00; border-right-color: currentColor; border-right-color: transparent; border-right-color: inherit;
Values
<color
>- Is a
<color>
CSS value describing the color of the right border. inherit
- Is a keyword denoting the color of the bottom border of the parent's element (which may be different from the
border-right-color
default value)
Formal syntax
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
Examples
A simple div with a border
HTML Content
<div class="mybox"> <p>This is a box with a border around it. Note which side of the box is <span class="redtext">red</span>.</p> </div>
CSS Content
.mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-color' in that specification. |
Candidate Recommendation | No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed. |
CSS Level 2 (Revision 1) The definition of 'border-right-color' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier)[1] | 4 | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.0)[1] | 6.5 | 11 | 1.0 |
[1] Gecko-based browsers like Firefox also supports the non-standard -moz-border-right-colors
CSS properties that sets the right border to multiple colors.
See also
- The border-related CSS shorthand properties
border
,border-right
, andborder-color
. - The color-related CSS properties applying to the other borders:
border-left-color
,border-bottom-color
, andborder-top-color
. - The other border-related CSS properties applying to the same border:
border-right-style
andborder-right-width
.