CSS border-inline-start-width Property

The CSS property border-inline-start-width controls the thickness of the border on the inline-start side of a box - that is, the start edge along the inline axis rather than a fixed physical side. Because it is a logical property, the edge it affects will vary with the element’s writing direction: for example left-to-right horizontal text the inline-start side usually corresponds to the physical left edge, while for right-to-left it corresponds to the physical right edge. This makes border-inline-start-width especially useful when writing styles that must work across multiple writing modes and directions, which are controlled by writing-mode and direction.

Visually, the property determines the width used when the border on that logical side is painted, but the border’s appearance also depends on accompanying border properties. If no border is drawn (for example because border-style is set so the border is not visible), the width has no effect on rendering; the resolved color comes from border-color if one is needed. Shorthand properties such as border or the logical shorthand border-inline-width can override a side-specific declaration, and in situations where you need a predictable physical side you can fall back to a physical property like border-left-width.

From the layout and painting perspective, the width set by border-inline-start-width participates in the element’s box model: it contributes to the space consumed by the element and influences layout calculations (and thus can affect available inline space, overflow, and layout of adjacent content). It also affects hit-testing and the area covered by the border during painting and compositing, and interacts with table border models when applicable - for example when the table uses a collapsed border model controlled by border-collapse. How the border width interacts with the element’s interior sizing depends on box-sizing and related sizing rules governed by box-sizing.

A few practical notes: border-inline-start-width is not inherited, so it must be set on each element you want to affect (or set via a shorthand). It is commonly used in responsive and internationalized layouts because logical properties reduce the number of direction-specific rules you must write. Because shorthands and cascade order still apply, be mindful that broader border shorthands can override this side-specific declaration unless you explicitly set the logical side property after the shorthand.