边框颜色

边框颜色border-color 简写 CSS 属性设置元素边框的颜色。

试试看

可以使用 border-top-color、border-right-color、border-bottom-color 和 border-left-color 分别设置每一边；或者使用考虑书写模式的 border-block-start-color、border-block-end-color、border-inline-start-color 和 border-inline-end-color。

您可以在 将颜色应用于 HTML 元素 中找到有关边框颜色的更多信息。

组成属性此属性是以下 CSS 属性的简写形式

border-bottom-color

border-left-color

border-right-color

border-top-color

语法css/* values */

border-color: red;

/* top and bottom | left and right */

border-color: red #f015ca;

/* top | left and right | bottom */

border-color: red rgb(240 30 50 / 70%) green;

/* top | right | bottom | left */

border-color: red yellow green blue;

/* Global values */

border-color: inherit;

border-color: initial;

border-color: revert;

border-color: revert-layer;

border-color: unset;

border-color 属性可以使用一个、两个、三个或四个值来指定。

当指定一个值时，它将相同的颜色应用于所有四边。

当指定两个值时，第一个颜色应用于顶部和底部，第二个颜色应用于左侧和右侧。

当指定三个值时，第一个颜色应用于顶部，第二个颜色应用于左侧和右侧，第三个颜色应用于底部。

当指定四个值时，颜色将按此顺序（顺时针）应用于顶部、右侧、底部和左侧。

值

定义边框的颜色。

正式定义初始值与简写形式的每个属性相同border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolor应用于所有元素。它也适用于 ::first-letter。继承否计算值与简写形式的每个属性相同border-bottom-color: 计算的颜色border-left-color: 计算的颜色border-right-color: 计算的颜色border-top-color: 计算的颜色动画类型与简写形式的每个属性相同border-bottom-color: 一个 颜色border-left-color: 一个 颜色border-right-color：一个颜色border-top-color：一个颜色正式语法border-color = [ | ]{1,4} = = stripes( # ) = && [ | ]? = | 示例完整的 border-color 用法HTML

html

CSS

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 逻辑属性和值级别 1 # logical-shorthand-keywordCSS 背景和边框模块级别 3 # 边框颜色浏览器兼容性BCD 表格仅在浏览器中加载

另请参阅

与边框颜色相关的 CSS 属性：border、border-top-color、border-right-color、border-bottom-color、border-left-color、

其他与边框相关的 CSS 属性：border-width、border-style

数据类型

其他与颜色相关的属性：color、background-color、outline-color、text-decoration-color、text-emphasis-color、text-shadow、caret-color 和 column-rule-color

使用 CSS 将颜色应用于 HTML 元素