CSS border-inline-start Property

This property defines the logical start border of an element, mapping to a physical border side based on the writing mode and text direction.

selector { border-inline-start: <border-width> || <border-style> || <color>; }
<border-width> Sets the thickness of the border using length units or keywords like thin, medium, or thick.
<border-style> Sets the line style of the border such as solid, dashed, dotted, or double.
<color> Sets the color of the border using hex, RGB, HSL, or named color values.

Code Examples

A basic example showing a logical start border that defaults to the left side in standard English layouts.

<div style="border-inline-start: 10px solid #ff0000; padding: 20px; background: #eeeeee;">
  This box has a thick red border at the start of the text flow.
</div>

An advanced example using JavaScript to toggle the text direction, demonstrating how the logical border and its color can be manipulated dynamically.

<div id="ui_box" style="border-inline-start: 5px solid #007bff; padding: 15px; margin: 10px; background: #f4f4f4;">
  Watch this border flip sides when the direction changes.
</div>

<button onclick="toggleLayout()">Switch to RTL</button>

<script>
function toggleLayout() {
  const box = document.getElementById("ui_box");
  if (box.dir === "rtl") {
    box.dir = "ltr";
    box.style.borderInlineStartColor = "#007bff";
  } else {
    box.dir = "rtl";
    box.style.borderInlineStartColor = "#28a745";
  }
}
</script>

Pro Tip

You can use this to create dynamic accent bars for blockquotes or sidebars. By using border-inline-start, you guarantee that the accent line always stays at the start of the sentence, regardless of whether the user is reading from left-to-right or right-to-left. It saves you from writing double the code.

Deep Dive

Think of border-inline-start as a smart border that knows which way your text is flowing. In a standard English layout which moves Left-to-Right, this property acts exactly like border-left. However, if you are building a site for Right-to-Left languages like Arabic or Hebrew, the browser automatically flips this border to the right side. It is a shorthand property that lets you set the width, style, and color all at once. By using logical properties like this instead of hard-coded physical directions, you create a layout that adapts itself to different cultures and reading patterns without you having to write specific CSS overrides for every language.

Best Practices

Use this property whenever you are building components that might be viewed in different language directions. It is the modern way to handle internationalization. Instead of reaching for border-left, reach for border-inline-start to ensure your design intent stays consistent globally. It is best used in combination with other logical properties like padding-inline and margin-inline for a fully fluid, direction-aware layout.

Common Pitfalls

The biggest trap is forgetting that this property depends on the direction or writing-mode of the element or its parent. If your text direction is not defined correctly, the border might appear on the side you did not expect. Also, remember that if you define border-left after border-inline-start in your CSS, the physical property will overwrite the logical one because of how the CSS cascade works.

Accessibility

While it does not directly impact screen readers, using logical properties ensures the visual structure of your document remains logical for users reading in different languages. This maintains the intended emphasis and hierarchy for sighted users across all locales.

Dev Data Table: border-inline-start property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2021
js_syntax_1 element.style.borderInlineStart = "5px solid #000000";
js_syntax_2 element.style.setProperty("border-inline-start", "5px solid #000000");
js_note In JavaScript, use the camelCase property borderInlineStart when accessing the style object directly.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 41, "Safari": 12.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 12.2, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...