border-block-end - CSS（层叠样式表） 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

border-block-end 属性是一个简写属性，用于在样式表中的单个位置设置各个逻辑块结尾边界属性值。

该交互式示例的源码存储在GitHub存储库中。如果你想参与该项目的开发, 请克隆 https://github.com/mdn/interactive-examples 并向我们发送拉取代码请求

Syntax

border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.

Related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element.

初始值	as each of the properties of the shorthand: border-top-width: medium border-top-style: none border-top-color: currentcolor
适用元素	all elements
是否是继承属性	否
计算值	as each of the properties of the shorthand: border-top-width: the absolute length or 0 if border-top-style is none or hidden border-top-style: as specified border-top-color: computed color
Animation type	as each of the properties of the shorthand: border-block-end-color: a color border-block-end-style: discrete border-block-end-width: a length

Values

The border-block-end 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 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>

Example

HTML Content

<div>
  <p class="exampleText">Example text</p>
</div>

CSS Content

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}

Specification

Specification	Status	Comment
CSS Logical Properties and Values Level 1 border-block-end	Editor's Draft	Initial definition

Browser compatibility

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• This property maps to one of the physical border properties: border-top, border-right, border-bottom, or border-left.
• writing-mode, direction, text-orientation