CSS | border-block-end-color 属性

简介

border-block-end-color 属性指定元素下边框（块级边框）的颜色，即使设置了 border-style: none 或者 border-bottom-style: none，也能成功设置边框颜色。

语法

border-block-end-color: color|transparent|initial|inherit;

• color：用于设置边框颜色的 CSS 颜色值。默认值为 currentColor。
• transparent：表示边框颜色为透明。
• initial：将属性设置为它的默认值。
• inherit：继承父元素的属性值。

实例

<div class="container">
  This div has a colored bottom border.
</div>

.container {
  border-block-end-color: red;
  border-block-end-width: 5px;
  border-block-end-style: solid;
}

运行结果：

浏览器兼容性

|Chrome|Firefox|Safari|Edge|IE|Opera| |---|---|---|---|---|---| |57+|52+|11.1+|16+|11|44+|

注意事项

• border-block-end-color 属性仅适用于块级元素。
• 对于水平方向的边框，应使用 border-block-start-color、border-block-end-color、border-inline-start-color、border-inline-end-color 等属性。