CSS border-inline-width Property
Description
The border-inline-width CSS property controls the thickness of an element’s borders along the inline axis - that is, the two edges corresponding to inline-start and inline-end. It is a logical property: rather than addressing physical edges such as left or right, it addresses the pair of borders that run parallel to the line of text. Because it only affects the inline-direction edges, it lets you express border widths in a writing-mode–agnostic way so the same rule adapts when content is laid out left-to-right, right-to-left, or in vertical writing modes.
How those inline edges map to physical sides depends on the current text orientation and direction. For example, in a left-to-right horizontal flow the inline edges typically correspond to the left and right physical borders, while in vertical flows they can correspond to top and bottom. This mapping means a single declaration of border-inline-width can produce different visual results when the page’s writing direction or the writing-mode changes, which is useful for internationalized layouts where you want the same styling behavior across multiple scripts and reading directions.
The property participates in the normal cascade and can be set either directly or via shorthand declarations. Shorthand rules such as border-inline may set width together with style and color, and more general shorthands like border-width can override or be overridden depending on specificity and order. A border will only be visible if an appropriate border style is present, so the effect of border-inline-width is closely tied to the corresponding border-inline-style declaration; if the style is 'none' (or otherwise produces no paint), width has no visible result.
Although logical properties simplify responsive and internationalized design, they also interact with legacy or physical properties. If both a logical property and a physical property like border-left-width are specified, the cascade rules determine which wins - typically the more specific or later rule overrides the other. Finally, changes to inline border width influence the box model and painting: thicker inline borders change the visual weight of edges, can affect available content space when box sizing and layout algorithms compute sizes, and will participate in normal border painting order alongside their block-axis counterparts.
Definition
- Initial value
- medium
- Applies to
- all elements
- Inherited
- no
- Computed value
- absolute length; 0 if the border style is none or hidden
- Animatable
- by computed value type
- JavaScript syntax
- object.style.borderInlineWidth
Interactive Demo
Inline Width Property
Syntax
border-inline-width: <border-width>
Values
- <border-width>Specifies the width of the border
Example
Browser Support
The following information will show you the current browser support for the CSS border-inline-width property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
