CSS border-block-end-style Property

The border-block-end-style property controls the line-style used to draw the border on the element’s block-end side - that is, the edge of the element that corresponds to the end of the block axis in the current writing mode. As a logical longhand, it is used to express border presentation in a writing-mode–aware way, so the same rule can produce the correct border in horizontal and vertical layouts without referencing physical edges. It is applied to the element’s border box and participates in the normal cascade; it is not an inherited property.

Which physical edge actually receives the style depends on the document’s writing mode and directionality. The mapping between logical and physical edges is determined by the element’s writing-mode, so in a typical horizontal-tb context the block end corresponds to the bottom edge and the logical property will affect the equivalent physical property (for example, the bottom border in that mode would correspond to border-bottom-style). In vertical or other writing modes the block-end edge will map to a different physical side, and the same logical declaration follows that mapping automatically.

Because it is a longhand logical property, border-block-end-style interacts with shorthands and other border properties: a shorthand that sets the block-axis borders will override this longhand when both apply. For example, declarations made with the border-block shorthand can replace individually set block start/end styles. In painting, the chosen border style works together with the element’s border width and color to determine the visible result - if the computed style results in a non-rendering state, the border will not be drawn regardless of width or color settings. Use logical border properties like this one when you need borders that adapt correctly to international layouts and different writing directions without conditional rules.