border-top-color

在此页

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

border-top-color CSS property sets the color of an element's top border . It can also be set with the shorthand CSS properties border-color or border-top .

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.

句法

/* <color> values */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentcolor;
border-top-color: transparent;
/* Global values */
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;

border-top-color property is specified as a single value.

值

<color>

形式定义

初始值	`currentcolor`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	computed color
动画类型	a color

形式句法

<color>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>

范例

A simple div with a border

HTML

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

CSS

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

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-top-color' in that specification.	候选推荐	No significant changes, though the `transparent` keyword, now included in `<color>` which has been extended, has been formally removed.
CSS Level 2 (Revision 1) The definition of 'border-top-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-top-color`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项完整支持 1 注意事项注意事项 Firefox also supports the non-standard `-moz-border-top-colors` CSS property that sets the top border to multiple colors.	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项完整支持 4 注意事项注意事项 Firefox also supports the non-standard `-moz-border-top-colors` CSS property that sets the top border to multiple colors.	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持
见实现注意事项。

另请参阅

The border-related CSS shorthand properties: border , border-top ，和 border-color .
The color-related CSS properties for the other borders: border-right-color , border-bottom-color ，和 border-left-color .
The other border-related CSS properties applying to the same border: border-top-style and border-top-width .

元数据

最后修改： Oct 4, 2020

在此页

句法

值