CSS border-inline-end-width Property

The border-inline-end-width property controls the thickness of the border placed on an element’s inline end edge - that is, the logical edge that corresponds to the end of a line of text in the element’s writing direction. Because it is a logical property, authors use it when they want border sizing to follow the flow of text rather than a hard physical side; this makes styles more resilient across different writing modes and text directions. It’s commonly set together with other border properties to produce the intended visual and layout effects for the inline end edge.

Which physical side the inline end maps to depends on the element’s writing system and base text direction. The mapping is determined by the writing-mode and direction properties: in a left-to-right horizontal flow the inline end is the right edge, while in a right-to-left flow it becomes the left edge; in vertical writing modes the inline end corresponds to one of the top/bottom physical edges. Because of this, using border-inline-end-width allows the same CSS to adapt automatically when an author switches languages or writing mode.

This property interacts with other border-related properties. Whether the border is actually drawn is controlled by border-style, and the color is set by border-color. Broad, compound declarations such as border-width and the logical shorthand border-inline-width can override or set multiple sides at once; likewise, the logical counterpart border-inline-start-width is used for the opposite inline edge. In the cascade, specific longhand settings for the inline end edge take precedence over earlier shorthand or less specific rules.

In layout terms, the value you set for this property occupies space in the element’s box and affects how content and adjacent boxes are sized and positioned. Because it is a sizing property rather than a purely decorative one, changes to border-inline-end-width can influence box metrics such as available content width. For internationalized or bidirectional designs, preferring logical properties like border-inline-end-width over physical ones simplifies maintenance and reduces the need for direction-specific overrides.