边框颜色 | border-color

CSS属性border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color,border-right-color,border-bottom-color,border-left-color

/* border-color: color */ /* the color applies to all sides */ 
border-color: red;

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

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

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

border-color: inherit;

• border-top-color：currentcolor

• border-right-color：currentcolor

• border-bottom-color：currentcolor

• border-left-color：currentcolor

Applies to all elements. It also applies to [`::first-letter`](::first-letter).   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• border-bottom-color：计算颜色

• border-left-color：计算颜色

• border-right-color：计算颜色

• border-top-color：计算颜色

Animation type as each of the properties of the shorthand:

• border-bottom-color：颜色

• border-left-color：颜色

• border-right-color：颜色

• border-top-color：颜色

Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

值

color使用 <color>来表示四个边框的颜色，仅用于单值语法。inherit这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

正式语法

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

示例

完整的边框颜色使用

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内容

#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;
}

结果

规范

浏览器兼容性

以下Mozilla扩展将边框为Firefox等基于Gecko的浏览器设置成多种颜色。-moz-border-top-colors，-moz-border-right-colors，-moz-border-bottom-colors，-moz-border-left-colors

另见

• 边框颜色相关CSS属性：border，border-top-color，border-right-color，border-bottom-color，border-left-color，

• 其他与边界有关的CSS属性：border-width，border-style