CSS border-inline-width Property

This property sets the thickness of the logical inline start and end borders of an element, which adapt based on the writing mode and direction.

selector { border-inline-width: value; }
thin Sets a thin border width, typically mapping to 1px in most browsers.
medium Sets a medium border width, typically mapping to 3px.
thick Sets a thick border width, typically mapping to 5px.
<length> Defines a specific thickness using units like px, em, rem, or vh.

Code Examples

A basic example showing how to apply a uniform width to both logical inline borders.

<div style="border-inline-width: 5px; border-inline-style: solid; border-inline-color: #ff9900; padding: 10px;">
  This box has a 5px border on the start and end of the inline axis.
</div>

An advanced example using JavaScript to dynamically update the logical inline border width of an element.

<div id="demoBox" style="border-inline-style: solid; border-inline-color: #0088ff; padding: 20px; transition: border-inline-width 0.3s;">
  Dynamic Logical Border
</div>
<button onclick="updateBorder()">Update Width</button>

<script>
function updateBorder() {
  const el = document.getElementById("demoBox");
  const randomWidth = Math.floor(Math.random() * 20) + "px";
  el.style.setProperty("border-inline-width", randomWidth);
  console.log("New width set to: " + randomWidth);
}
</script>

Pro Tip

You can provide two values to this property to set different widths for the start and end. For example, border-inline-width: 2px 10px; will give the starting edge a thin line and the ending edge a thick line. This is a great way to create asymmetrical designs that stay logical across different languages.

Deep Dive

Think of the inline axis as the direction text flows. In a standard English layout, that is horizontal (left to right). Using border-inline-width allows you to target the left and right borders simultaneously. However, if you switch the writing mode to vertical-rl for a language like Japanese, those borders suddenly behave like top and bottom borders. It is a logical approach to layout, meaning the borders follow the flow of the content rather than being stuck to physical screen directions. This property is a shorthand for border-inline-start-width and border-inline-end-width.

Best Practices

Use this property instead of border-left-width and border-right-width if you are building a site that supports multiple languages, especially those with different reading directions like Arabic or Hebrew. It keeps your CSS cleaner because you do not have to write separate overrides for right-to-left layouts. Always pair this with a border-style, because if the style is none, the width will not be visible regardless of the value you set.

Common Pitfalls

A common mistake is forgetting that this property only affects the inline dimension. If you want to change the top and bottom borders in a standard horizontal layout, you need border-block-width. Also, beginners often get confused when the borders move after changing the writing-mode; remember that logical means relative to the text flow, not the screen edge.

Accessibility

Borders provide essential visual cues for defining the boundaries of interactive elements. Ensure that your border-inline-width provides enough visual weight for users with low vision to identify the element, and maintain high contrast between the border color and the background.

Dev Data Table: border-inline-width property

default medium
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderInlineWidth
js_syntax_2 element.style.setProperty("border-inline-width", "10px")
js_note When using JavaScript to manipulate logical properties, ensure you are targeting the camelCase version for direct style access or the hyphenated string for the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...