border-block
border-block is a shorthand that draws the same border on the two sides at the start and end of the direction lines advance in (the block direction). In horizontal writing, it is the top and bottom borders.
Syntax
<line-width> || <line-style> || <color>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
border-block8pxborder-block-width
solidborder-block-style
#88d1c7border-block-color
Code
.box {
border-block: 8px solid #88d1c7;
}Controls
border-block-width8px
border-block-stylesolid
border-block-color#88d1c7
About
Writing the value
- As with border, write the width, style and color in any order, and leave any of them out. Left-out parts take their initial values (
medium,none,currentcolor), so without a style no border is drawn. - Both sides get the same value. To make the start and end differ, write
border-block-startandborder-block-endafter it.
The preview is horizontal, so the borders go on the top and bottom.
How the direction changes it
- In vertical writing such as
writing-mode: vertical-rl, they become the left and right borders. - Which sides they are depends on the element's own writing-mode, not on its parent's.
When to use it
To draw dividers above and below headings or table rows. On vertical pages, the lines go at both ends of the direction lines advance in.
Watch out
- In horizontal writing, it refers to the same sides as border-top and border-bottom. When an element has both, the one written later wins.
- Unlike border, it does not reset
border-image. - Works in all major browsers.