The primary difference between border-block and border-inline in CSS is the direction they style borders, relative to the flow of content. border-block styles the borders in the block direction (typically top and bottom), while border-inline styles the borders in the inline direction (typically left and right), adapting to the writing-mode of the element.
These properties are logical border properties, meaning their effect depends on the element's writing-mode. They represent a move towards more international-friendly web design, accommodating languages that read in different directions (like right-to-left or vertically).
Understanding Logical Border Properties
Traditional CSS border properties like border-top, border-right, border-bottom, and border-left are physical properties – they always refer to the physical edges of the box. Logical properties, like border-block and border-inline, refer to the start and end edges relative to the text flow.
Border Block (border-block)
According to the reference, border-block "styles the borders in the block direction". By default, in languages like English (which use a horizontal, top-to-bottom writing mode), this translates to the top and bottom borders.
- It's the companion to
border-inline. - By default, it styles the borders at the top and bottom of an element.
- It adapts when switching the
writing-mode. For example, in a vertical writing mode, the block direction would correspond to the left and right physical borders.
There are also specific properties like border-block-start and border-block-end to control just one edge in the block direction.
Border Inline (border-inline)
The reference states that border-inline "styles borders that flow in the inline direction". In a typical horizontal writing mode (like English), this means it styles the left and right borders, as text flows horizontally along the inline axis.
- It's the companion to
border-block. - By default, it styles the borders at the left and right of an element.
- Like
border-block, it adapts to thewriting-mode. In a vertical writing mode, the inline direction would correspond to the top and bottom physical borders.
Similar to border-block, there are border-inline-start and border-inline-end properties.
Comparing Border Block and Border Inline
Here's a quick comparison based on typical horizontal writing modes (like writing-mode: horizontal-tb):
| Property | Direction Styled | Physical Borders (Default writing-mode: horizontal-tb) |
|---|---|---|
border-block |
Borders in the block axis (top-to-bottom flow) | Top and Bottom |
border-inline |
Borders in the inline axis (left-to-right flow) | Left and Right |
Key Insight: The crucial point is that these properties are not fixed to physical edges but are tied to the flow of the content. When you change the writing-mode, the physical borders that border-block and border-inline correspond to will change.
Practical Example (Conceptual)
Imagine a div with border-block: 2px solid blue; and border-inline: 2px solid red;.
- In
writing-mode: horizontal-tb;(default):- The top and bottom borders will be blue.
- The left and right borders will be red.
- In
writing-mode: vertical-lr;(text flows vertically, lines from left to right):- The left and right borders become the block direction borders (as content flows left-to-right). These will be blue.
- The top and bottom borders become the inline direction borders (as text flows vertically within the line). These will be red.
This adaptability is essential for creating layouts that work correctly across different languages and writing systems without needing to rewrite border styles for each one.
In summary, border-block handles borders along the direction blocks are laid out, while border-inline handles borders along the direction text flows within a line. Their physical location depends entirely on the writing-mode.
