border-inline
border-inline is a shorthand that draws the same border on the two sides at the start and end of the direction text runs in (the inline direction). In horizontal writing, it is the left and right borders.
Syntax
<line-width> || <line-style> || <color>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
border-inline8pxborder-inline-width
solidborder-inline-style
#88d1c7border-inline-color
Code
.box {
border-inline: 8px solid #88d1c7;
}Controls
border-inline-width8px
border-inline-stylesolid
border-inline-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-inline-startandborder-inline-endafter it.
The preview is horizontal, left to right, so the borders go on the left and right.
How the direction changes it
- In vertical writing such as
writing-mode: vertical-rl, they become the top and bottom 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 at both ends of the direction text runs in, on pages that switch between vertical and horizontal writing.
Watch out
- In horizontal writing, it refers to the same sides as border-left and border-right. When an element has both, the one written later wins.
- Unlike border, it does not reset
border-image. - Works in all major browsers.