border-right-color - CSS（层叠样式表） 编辑

border-right-color CSS属性用来设置元素右边的 border. 这个属性的值也可以通过简写的CSS属性 border-color 或border-right来设置.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

/* <color> values */
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentColor;
border-right-color: transparent;

/* Global values */
border-right-color: inherit;
border-right-color: initial;
border-right-color: unset;

The border-right-color property is specified as a single value.

Values

<color>

The color of the right border.

Formal syntax

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

A simple div with a border

HTML

<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

.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 border-color	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) border-right-color	Recommendation	Initial definition

初始值	currentcolor
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	否
计算值	computed color
Animation type	a color

Browser compatibility

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• The border-related CSS shorthand properties: border, border-right, and border-color.
• The color-related CSS properties for the other borders: border-left-color, border-bottom-color, and border-top-color.
• The other border-related CSS properties applying to the same border: border-right-style and border-right-width.