边框颜色

border-color 简写 CSS 属性设置元素边框的颜色。

试试看

可以使用 border-top-color、border-right-color、border-bottom-color 和 border-left-color 分别设置每一边；或者使用考虑书写模式的 border-block-start-color、border-block-end-color、border-inline-start-color 和 border-inline-end-color。

您可以在 将颜色应用于 HTML 元素 中找到有关边框颜色的更多信息。

组成属性

此属性是以下 CSS 属性的简写形式

语法

css
/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240 30 50 / 70%) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

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

border-color 属性可以使用一个、两个、三个或四个值来指定。

  • 当指定一个值时，它将相同的颜色应用于所有四边。
  • 当指定两个值时，第一个颜色应用于顶部和底部，第二个颜色应用于左侧和右侧。
  • 当指定三个值时，第一个颜色应用于顶部，第二个颜色应用于左侧和右侧，第三个颜色应用于底部。
  • 当指定四个值时，颜色将按此顺序（顺时针）应用于顶部、右侧、底部和左侧。

值

<color>

定义边框的颜色。

正式定义

初始值与简写形式的每个属性相同
应用于所有元素。它也适用于 ::first-letter。
继承否
计算值与简写形式的每个属性相同
动画类型与简写形式的每个属性相同

正式语法

border-color = 
  [ <color> | <image-1D> ]{1,4}  

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

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

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

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

示例

完整的 border-color 用法

HTML

html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

结果

规范

规范
CSS 逻辑属性和值级别 1
# logical-shorthand-keyword
CSS 背景和边框模块级别 3
# 边框颜色

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅