CSS border-inline-start-width Property

Sets the thickness of the border at the start of an element's inline dimension, automatically adjusting for text direction.

selector { border-inline-start-width: value; }
thin Sets a thin predefined thickness for the starting inline border.
medium Sets a medium predefined thickness for the starting inline border.
thick Sets a thick predefined thickness for the starting inline border.
<length> Specifies a custom thickness using units like px, em, rem, or vh.

Code Examples

A basic example showing a thick 8px border at the start of a div using a hex color.

<div style="border-inline-start-width: 8px; border-inline-start-style: solid; border-inline-start-color: #336699; padding: 10px; background-color: #f0f0f0;">
  This box has a thick border at the start of the text flow.
</div>

An advanced example demonstrating how logical properties automatically flip sides when the text direction changes, combined with JavaScript manipulation.

<div id="dynamicBox" style="border-inline-start-style: solid; border-inline-start-color: #ff5500; padding: 20px; direction: ltr;">
  Toggle the direction to see the border move automatically.
</div>
<button onclick="toggleDirection()">Switch Direction</button>

<script>
function toggleDirection() {
  const box = document.getElementById("dynamicBox");
  const currentDir = box.style.direction;
  box.style.direction = currentDir === "ltr" ? "rtl" : "ltr";
  // Dynamically update the width via JS
  box.style.borderInlineStartWidth = "15px";
}
</script>

Pro Tip

You can use this property in conjunction with CSS variables to create a global "accent-border-width" that stays logically consistent across your entire application, regardless of whether your users are reading horizontally or vertically.

Deep Dive

This property belongs to the Logical Properties module. Instead of pinning a border width to the physical "left" or "right", it pins it to the "start" of the text flow. Think of it like a flexible bookmark. In English (left-to-right), the start is the left. In Arabic or Hebrew (right-to-left), the start is the right. By using logical properties, your layout adapts to international users without you having to write specific CSS overrides for different languages. It only affects the width; you still need to define a style and color for the border to actually appear on the screen.

Best Practices

Use this property whenever you are building a layout that might be translated into right-to-left languages. It is much more efficient than hard-coding "border-left-width" and then manually switching it to "border-right-width" for RTL versions. Stick to "px" for fixed UI borders or "rem" if you want the border thickness to scale with the user's font size settings.

Common Pitfalls

The most common mistake is forgetting that this property only controls the width. If "border-inline-start-style" is set to "none" (which is the default), your width setting will appear to do nothing. It is like specifying how thick a wall should be without actually building the wall. Also, remember that this property reacts to the "direction" and "writing-mode" properties of the element or its parent.

Accessibility

Ensure that the border width you choose provides enough visual weight to be seen by users with visual impairments. High-contrast borders at the start of elements like blockquotes or sidebars help users orient themselves within the flow of the content, especially when the text direction changes.

Dev Data Table: border-inline-start-width property

default medium
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2019
js_syntax_1 element.style.borderInlineStartWidth = "5px";
js_syntax_2 element.style.setProperty("border-inline-start-width", "5px");
js_note In JavaScript, use camelCase for the property name when accessing the style object directly.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...