border-block-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Theborder-block-styleCSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to theborder-top-style andborder-bottom-style, orborder-left-style andborder-right-style properties depending on the values defined forwriting-mode,direction, andtext-orientation.
The border style in the other dimension can be set withborder-inline-style, which setsborder-inline-start-style, andborder-inline-end-style.
Try it
border-block-style: dotted;writing-mode: horizontal-tb;border-block-style: dotted;writing-mode: vertical-rl;border-block-style: groove;writing-mode: horizontal-tb;direction: rtl;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override;}Syntax
css
/* <'border-style'> values */border-block-style: dashed;border-block-style: dotted;border-block-style: groove;/* Global values */border-block-style: inherit;border-block-style: initial;border-block-style: revert;border-block-style: revert-layer;border-block-style: unset;Values
<'border-style'>The line style of the border. See
border-style.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
border-block-style =
<'border-top-style'>{1,2}
<border-top-style> =
<line-style>
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Examples
Dashed border with vertical text
HTML
html
<div> <p>Example text</p></div>CSS
css
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed;}Results
Specifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-style |
Browser compatibility
See also
- CSS Logical Properties and Values
- This property maps to one of the physical border properties:
border-top-style,border-right-style,border-bottom-style, orborder-left-style. writing-mode,direction,text-orientation