border-block
该CSS属性是一个简写属性在样式表一个单一的地方设置单独的逻辑块边界属性值。border-block
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
border-block
can be used to set the values for one or more of border-block-width
(en-US), border-block-style
(en-US), and border-block-color
(en-US) setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top
and border-bottom
or border-right
, and border-left
properties depending on the values defined for writing-mode
, direction
, and text-orientation
.
The borders in the other dimension can be set with border-inline
(en-US), which sets border-inline-start
(en-US), and border-inline-end
(en-US).
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
Values
The border-block
is specified with one or more of the following, in any order:
<'border-width'>
- The width of the border. See
border-width
. <'border-style'>
- The line style of the border. See
border-style
. <'color'>
- The color of the border. See
color
.
Formal definition
初始值 | as each of the properties of the shorthand:
|
---|---|
适用元素 | all elements |
是否是继承属性 | 否 |
计算值 | as each of the properties of the shorthand:
|
Animation type | discrete |
Formal syntax
border-block =
<'border-block-start'>
Examples
Border with vertical text
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border-block: 5px dashed blue;
}
Results
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 border-block |
Editor's Draft | 初始定义 |
浏览器兼容性
BCD tables only load in the browser
也可以看看
- 此属性映射到以下物理边界属性之一:
border-top
,border-right
,border-bottom
,或border-left
。 writing-mode
,direction
,text-orientation
}