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 value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | the 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-block | Chrome Full support 69 | Edge No support No | 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 No support No |
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