Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

CSS border-inline-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

Example of the Border
Inline Width Property

Syntax

border-inline-width: <border-width>

Values

  • <border-width>Specifies the width of the border

Example

<div class='container'>
<h2>border-inline-width examples</h2>
<div class='box box-ltr'>Inline widths: 12px 4px (LTR)</div>
<div class='box box-rtl'>Inline widths: 8px 2px (RTL)</div>
</div>
.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  max-width: 640px;
  margin: 24px;
}

h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.box {
  margin: 12px 0;
  padding: 12px;
  border-style: solid;
  border-color: #1f6feb;
  border-block-width: 3px; /* top and bottom border width */
  background: #f6fbff;
  border-radius: 6px;
}

.box-ltr {
  direction: ltr;
  border-inline-width: 12px 4px; /* inline-start 12px, inline-end 4px */
}

.box-rtl {
  direction: rtl;
  border-inline-width: 8px 2px; /* inline-start 8px, inline-end 2px (in RTL these swap visually) */
}

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
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!