CSS border-block-style Property

The CSS property border-block-style controls the visual line style applied to an element’s logical block-start and block-end borders. In practical terms it decides whether those logical block edges are drawn and, if drawn, what pattern or appearance they use - independent of their color or thickness. Because it addresses only the style aspect, it is commonly used together with separate properties that govern border color and border width when you need full control over an element’s borders.

Being a logical property, border-block-style maps to different physical edges depending on the writing mode and text direction of the element. In horizontal writing modes it corresponds to the physical top and bottom edges; in vertical writing modes it maps to the appropriate start and end block faces for that orientation. That mapping makes it particularly useful for internationalized layouts where content flow can change; the property automatically adapts as the element’s writing-mode or direction changes. When working with traditional physical border properties you will often think of border-block-style as the logical counterpart to those physical shorthands such as border-style.

In practical stylesheet authoring, border-block-style interoperates with the other logical border properties and with shorthands. For example, it is typically paired with border-block-width and border-block-color to fully define the appearance of the block-axis borders; assigning values through the overall border shorthand or the physical shorthands can override these logical settings depending on cascade and specificity. Keep in mind it is not inherited by default and is subject to normal cascade rules. Also note interactions with table rendering: when borders are rendered in a collapsed mode the effective border style may be determined by the table’s border-collapse rules and conflict-resolution rules, so the visual result can differ from isolated block elements. Finally, changes to border style are generally discrete (they do not interpolate smoothly like color or length), so transitions involving style changes behave accordingly.