CSS | border-block-end 属性

CSS 的 border-block-end 属性用于设置元素的垂直边框（与轴线垂直），即在块轴维度上的边框。

语法

/* 关键字值 */
border-block-end: none;
border-block-end: hidden;
border-block-end: dotted;
border-block-end: dashed;
border-block-end: solid;
border-block-end: double;
border-block-end: groove;
border-block-end: ridge;
border-block-end: inset;
border-block-end: outset;

/* 长度值 */
border-block-end: 2px;
border-block-end: 2em;
border-block-end: 2rem;
border-block-end: 2vw;
border-block-end: 2vh;

/* 全局值 */
border-block-end: inherit;
border-block-end: initial;
border-block-end: unset;

说明

• none：不显示边框（默认值）。
• hidden：与 none 相似，但适用于一些特定的情况，例如在表格中。
• dotted：点状边框。
• dashed：虚线边框。
• solid：实线边框。
• double：双线边框。
• groove：3D 凹槽边框。
• ridge：3D 凸槽边框。
• inset：3D 内凹边框。
• outset：3D 外凸边框。

此外，还可以使用长度值来指定边框宽度。

实例

以下代码演示了如何使用 border-block-end 属性来设置元素的垂直边框：

div {
  border-block-end: 2px solid #f00;
}

效果如下图所示：

浏览器兼容性

border-block-end 属性的浏览器兼容性如下：

• Chrome：63.0+
• Firefox：61.0+
• Safari：11.1+
• Opera：50.0+
• Edge：79.0+

参考资料

• MDN Web 文档