border-bottom-color

在此页

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

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

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

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

值

<color>

形式定义

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

形式句法

<'border-top-color'>

范例

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-bottom-color: red;
    width: auto;
}
.redtext {
    color: red;
}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-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-bottom-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-bottom-color`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项完整支持 1 注意事项注意事项 Firefox also supports the non-standard `-moz-border-bottom-colors` CSS property that sets the bottom 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-bottom-colors` CSS property that sets the bottom border to multiple colors.	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

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

另请参阅

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

元数据

最后修改： Jul 24, 2020

在此页

句法

值