border-block

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet. 

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, border-block-style, and border-block-color 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, which sets border-inline-start, and border-inline-end.

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 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: 5px dashed blue;
}

Specification

Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'border-block' in that specification.
Editor's Draft Initial definition

Browser compatibility 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-blockChrome Full support 69Edge No support NoFirefox Full support 66IE No support NoOpera Full support 56Safari No support NoWebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 66Opera Android Full support 48Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also