The border-block-width is a logical CSS property that controls the thickness of an element’s borders on the block axis - that is, the edges that sit at the “start” and “end” of the block flow for that element. It’s used to set both the block-start and block-end border widths together, providing a convenient way to express border thickness in terms of flow-relative edges rather than physical top/bottom edges. When you set border-block-width, the values are applied to the corresponding long-axis edges of the box, and they can be overridden by the more specific long-edge properties when needed (for example, the individual block-start or block-end width properties).

Because border-block-width is a logical property, the physical edges it affects depend on the element’s writing and directionality context. In left-to-right horizontal writing modes it typically maps to the physical top and bottom edges, but in vertical or right-to-left layouts those mappings change. That makes the property especially useful for internationalized layouts: by using writing-mode and direction aware properties, a single declaration of border-block-width can produce the correct block-edge widths across different writing systems without separate rules for top/bottom.

Practical rendering and layout also depend on other border and box model settings. Whether a border is visible depends on the element’s border style and color, so border-style and border-width (and border-color, if you use it) work together with border-block-width to produce the final drawn border. The way border thickness contributes to the element’s total outer dimensions interacts with the box-sizing model, so consider box-sizing when you need precise control over how border thickness affects layout and element size.

From a stylesheet-authoring perspective, border-block-width is convenient for component and layout rules that should adapt to text direction and writing-mode without maintaining separate top/bottom declarations. It participates in the normal cascade and specificity rules, and it is not inherited by default - you’ll typically set it on the element whose box you want to affect or on a component wrapper. For fine-grained control you can use the corresponding longhand properties to adjust one block edge independently, and you can animate or transition border-width values where supported to produce smooth thickness changes in interactive interfaces.