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 1The definition of 'border-block' in that specification. | Editor's Draft | Initial definition |
Browser compatibility
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.
Update compatibility data on GitHub
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
border-block by Mozilla Contributors is licensed under CC-BY-SA 2.5.