View in EnglishAlways switch to English

border-right-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

尝试一下

border-right-color: red;

border-right-color: #32a1ce;

border-right-color: rgb(170, 50, 220, 0.6);

border-right-color: hsl(60, 90%, 50%, 0.8);

border-right-color: transparent;

<section>  <div>    This is a box with a border around it.  </div></section>

#example-element {  background-color: #eee;  color: #000;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;}

Syntax

css

/* <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;

Theborder-right-color property is specified as a single value.

Values

<color>: The color of the right border.

Formal syntax

border-right-color =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

Examples

A simple div with a border

HTML

html

<div>  <p>    This is a box with a border around it. Note which side of the box is    <span>red</span>.  </p></div>

CSS

css

.mybox {  border: solid 0.3em gold;  border-right-color: red;  width: auto;}.redtext {  color: red;}

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-color

初始值	`currentcolor`
适用元素	所有元素. It also applies to`::first-letter`.
是否是继承属性	否
计算值	颜色计算值
动画类型	acolor

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨2025年11月3日⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換