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
.
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
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
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 The definition of 'border-block' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-block | Chrome Full support 69 | Edge Full support 79 | Firefox Full support 66 | IE No support No | Opera Full support 56 | Safari No support No | WebView Android Full support 69 | Chrome Android Full support 69 | Firefox Android Full support 66 | Opera Android Full support 48 | Safari iOS No support No | Samsung Internet Android Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- This property maps to one of the physical border properties:
border-top
,border-right
,border-bottom
, orborder-left
. writing-mode
,direction
,text-orientation