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 typediscrete

Formal syntax

<'border-top-width'> || <'border-top-style'> || <color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

也可以看看