CSS border-block-end-width Property

The border-block-end-width property controls the thickness of an element’s border on the logical “end” side of the block axis. As a logical property, it is written relative to the flow of content rather than the physical top/right/bottom/left edges; that makes it useful in responsive and internationalized layouts where the block axis or inline direction may change. When you adjust this property you are changing how much space the border occupies along that block-end edge, which affects the visual weight of the border and how it contributes to the element’s overall box dimensions.

Because it’s a border width property, its visible effect depends on the corresponding border style being present - a width has no visible result if the border style on that side is not rendered. If you need to coordinate the appearance, consider the relationship with border-style (which controls whether a border is drawn and how it looks). Similarly, this property is one piece of the logical border set and is often used alongside the shorthand border-block-end (which groups the block-end border’s width, style and color) or with the broader border-block and border-width shorthands that set values for both block-start and block-end or all logical sides in a single declaration.

Because mapping from logical to physical sides depends on writing mode and text direction, the physical edge affected by border-block-end-width can differ between documents. The element’s writing mode (controlled by properties such as writing-mode) and the block flow determine which physical side receives the width you specify; this makes the property particularly valuable for authoring stylesheets that must work consistently across horizontal and vertical text flows or left-to-right and right-to-left contexts. In the cascade, longhand declarations of this property will override earlier shorthands that set the same logical side if they have equal specificity and later order.

In practical use, designers and developers rely on border-block-end-width to tune the visual separation at the end of a block container without hardcoding physical sides, simplifying maintenance when layouts need to support multiple writing systems. Be mindful that changing border widths affects layout: borders contribute to the element’s box and can trigger layout recalculations, so frequent dynamic changes (for example, in animations) may have performance implications depending on how they’re applied.