在此页

• 组成特性
• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

border-color 简写 CSS property sets the color of an element's border.

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.

Each side can be set individually using border-top-color , border-right-color , border-bottom-color ，和 border-left-color ; or using the writing mode-aware border-block-start-color , border-block-end-color , border-inline-start-color ，和 border-inline-end-color .

You can find more information about border colors in Borders in Applying color to HTML elements using CSS .

组成特性

此特性是下列 CSS 特性的简写：

• border-bottom-color
• border-left-color
• border-right-color
• border-top-color

句法

/* <color> values */
border-color: red;
/* horizontal | vertical */
border-color: red #f015ca;
/* top | vertical | bottom */
border-color: red rgb(240,30,50,.7) green;
/* top | right | bottom | left */
border-color: red yellow green blue;
/* Global values */
border-color: inherit;
border-color: initial;
border-color: unset;
					

border-color property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same color to all four sides .
• When two values are specified, the first color applies to the top and bottom , the second to the left and right .
• When three values are specified, the first color applies to the top , the second to the left and right , the third to the bottom .
• When four values are specified, the colors apply to the top , right , bottom ，和 left in that order (clockwise).

值

<color>

定义边框的颜色。

形式定义

初始值	as each of the properties of the shorthand: border-top-color : currentcolor border-right-color : currentcolor border-bottom-color : currentcolor border-left-color : currentcolor
适用于	所有元素。它还适用于 ::first-letter .
继承	no
计算值	as each of the properties of the shorthand: border-bottom-color ：计算颜色 border-left-color ：计算颜色 border-right-color ：计算颜色 border-top-color ：计算颜色
动画类型	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

形式句法

<color>{1,4}
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>
					

范例

Complete border-color usage

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

结果

规范

规范	状态	注释
CSS Logical Properties and Values Level 1	编者草案	添加 logical 关键词。
CSS Backgrounds and Borders Module Level 3 The definition of 'border-color' in that specification.	候选推荐	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.	推荐	The property is now a shorthand property.
CSS Level 1 The definition of 'border-color' in that specification.	推荐	初始定义。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
border-color	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: -moz-border-top-colors , -moz-border-right-colors , -moz-border-bottom-colors , -moz-border-left-colors	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 4	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: -moz-border-top-colors , -moz-border-right-colors , -moz-border-bottom-colors , -moz-border-left-colors	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

• Border-color related CSS properties: border , border-top-color , border-right-color , border-bottom-color , border-left-color ,
• Other border-related CSS properties: border-width , border-style
• <color> data type
• Other color-related properties: color , background-color , outline-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color ，和 column-rule-color
• Applying color to HTML elements using CSS

元数据

• 最后修改： Jul 24, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Backgrounds and Borders
4. 指南

   1. Resizing background images with background-size
   2. Using multiple backgrounds
5. 特性

   1. background
   2. background-attachment
   3. background-clip
   4. background-color
   5. background-image
   6. background-origin
   7. background-position
   8. background-position-x
   9. background-position-y
   10. background-repeat
   11. background-size
   12. border
   13. border-bottom
   14. border-bottom-color
   15. border-bottom-left-radius
   16. border-bottom-right-radius
   17. border-bottom-style
   18. border-bottom-width
   19. border-color
   20. border-image
   21. border-image-outset
   22. border-image-repeat
   23. border-image-slice
   24. border-image-source
   25. border-image-width
   26. border-left
   27. border-left-color
   28. border-left-style
   29. border-left-width
   30. border-radius
   31. border-right
   32. border-right-color
   33. border-right-style
   34. border-right-width
   35. border-style
   36. border-top
   37. border-top-color
   38. border-top-left-radius
   39. border-top-right-radius
   40. border-top-style
   41. border-top-width
   42. border-width
   43. box-shadow