CSS border-block 属性

定义和用法

border-block 属性是以下属性的简写：

• border-block-width
• border-block-style（必需）
• border-block-color

如果省略颜色或宽度的值，则将使用默认值。

CSS border-block 属性与 border 属性非常相似，但 border-block 属性依赖于块方向。

注意：相关的 CSS 属性 writing-mode 定义了块方向。这会影响块的起点和终点位置以及 border-block 属性的结果。对于英文页面，行内方向是从左到右，块方向是向下。

实例

例子 1

为块方向上不同元素的边框设置样式、颜色和宽度：

h1 {
  border-block: 5px solid red;
}

h2 {
  border-block: 4px dotted blue;
}

div {
  border-block: double;
}

亲自试一试

例子 2：结合 writing-mode 属性

块方向上起始和结束边框的位置受 writing-mode 属性影响：

div {
  writing-mode: vertical-rl;
  border-block: hotpink dashed 8px;
}

亲自试一试

CSS 语法

border-block: border-block-width border-block-style border-block-color |initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

教程：CSS 边框

参考：CSS border 属性

参考：CSS border-block-color 属性

参考：CSS border-block-style 属性

参考：CSS border-block-width 属性

参考：CSS writing-mode 属性