CSS | border-block-end-style 属性

简介

border-block-end-style 属性用于设置块级轴（垂直方向上）的结束边框样式。块级轴通常是从上到下的，所以 border-block-end-style 实际上设置的是元素底边的边框样式。该属性可用于自定义边框的样式，如实线、虚线、点线、双线等。

语法

border-block-end-style: value;

取值

• none：无边框。
• hidden：隐藏边框。
• dotted：点线边框。
• dashed：虚线边框。
• solid：实线边框。
• double：双线边框。
• groove：3D 凹槽边框。
• ridge：3D 凸槽边框。
• inset：3D inset 边框。
• outset：3D outset 边框。
• inherited：从父元素继承边框样式。

示例

.container {
  border-block-end-style: dashed;
}

注意事项

• border-block-end-style 属性仅适用于块级元素，无法应用于行内元素。
• 如果同时使用了 border-block-end-width 和 border-block-end-style 属性，但没有设置 border-block-end-color，则边框颜色将继承自文本颜色。
• 该属性的值可以设置为 inherit，表示从父元素继承边框样式。

浏览器兼容性

该属性的浏览器兼容性如下：

| | | | | | | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | 1.0+ | 1.0+ | 3.2+ | 4.0+ | 5.5+ |

参考链接

• MDN web docs - border-block-end-style