边框颜色 | border-color

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;

初始值	as each of the properties of the shorthand: border-top-color: currentcolor border-right-color: currentcolor border-bottom-color: currentcolor border-left-color: currentcolor
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	no
适用媒体	visual
计算值	as each of the properties of the shorthand: border-bottom-color: computed color border-left-color: computed color border-right-color: computed color border-top-color: computed color
Animation type	as each of the properties of the shorthand: border-bottom-color: a color border-left-color: a color border-right-color: a color border-top-color: a color
正规顺序	the unique non-ambiguous order defined by the formal grammar

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

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-color' in that specification.	Candidate Recommendation	The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1)The definition of 'border-color' in that specification.	Recommendation	The property is now a shorthand property
CSS Level 1The definition of 'border-color' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier) 1	4.0	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	4.0	(Yes)	1.0 (1.9.2) 1	7.0	11	1.0

以下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