CSS border-inline-start-style Property

The CSS property border-inline-start-style determines the drawing style used for the border on an element's inline-start edge. It is a logical property, so it targets the edge that is considered the "start" of the inline axis for the element rather than a fixed physical side. As such, this property only controls how the border is rendered (its visual pattern or style) for that specific logical edge; it does not by itself change the border's thickness or color.

Because it is logical, the actual physical side affected by border-inline-start-style depends on the page’s text flow and writing orientation. The mapping from the logical inline start to a physical side is governed by properties that control writing direction and orientation, such as writing-mode and direction. When you change those layout directions, the inline start edge can move to a different physical edge of the box, so the border style you set follows the logical edge rather than remaining stuck to a single physical side.

In the cascade and shorthand model, border-inline-start-style works together with broader and sibling border properties. It can be set independently of shorthands like border-inline and the global shorthands such as border, and it has higher specificity than a shorthand that sets multiple inline borders at once; likewise it is one aspect of the overall border rendering alongside the border’s width and color properties such as border-inline-start-width and border-inline-start-color. Border properties are not inherited, so this property affects only the element to which it is applied and participates in the normal cascade and specificity rules.

When using border-inline-start-style in design, consider how logical borders simplify internationalized layouts by adapting automatically to different writing systems and directions. Because it only defines the stylistic aspect of the edge, it is commonly used together with matching width and color settings to produce the intended visual separation. Also keep in mind how the chosen style interacts with adjacent edges and any overlapping decorations (e.g., outlines or backgrounds) to ensure clear and consistent rendering across different flow directions.