CSS border-inline Property

This shorthand property sets the logical inline start and end borders of an element based on the writing mode and direction.

selector { border-inline: [width] [style] [color]; }
<line-width> Sets the thickness of the border using absolute lengths or relative keywords.
<line-style> Defines the pattern of the border line such as solid, dashed, or dotted.
<color> Sets the color of the border using keywords, hex values, or functional notations.

Code Examples

A basic example showing how to apply a 5px solid red border to the inline sides of a div.

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

An advanced example using JavaScript to toggle the writing mode and update the border-inline property dynamically.

<div id="dynamicBox" style="border-inline: 4px dashed #333333; padding: 20px; writing-mode: horizontal-tb;">
  Observe how the borders adapt when the writing mode changes.
</div>
<button onclick="toggleDirection()">Toggle Writing Mode</button>
<script>
function toggleDirection() {
  const box = document.getElementById("dynamicBox");
  if (box.style.writingMode === "horizontal-tb") {
    box.style.writingMode = "vertical-rl";
    box.style.borderInline = "4px dashed #0000ff";
  } else {
    box.style.writingMode = "horizontal-tb";
    box.style.borderInline = "4px dashed #333333";
  }
}
</script>

Pro Tip

You can use border-inline: inherit; to make a child element mirror the logical inline borders of its parent, which is great for maintaining nested UI consistency in complex layouts.

Deep Dive

Think of border-inline as a smart version of setting left and right borders. In a standard English layout, the inline axis runs horizontally. If you set a border-inline, you are placing a border at the start and end of where the text flows. If the website is switched to a Right-to-Left language like Arabic, these borders automatically flip their positions to match the new flow of text. It saves you from writing media queries or extra classes to swap border-left and border-right. It is essentially a combo deal for border-inline-start and border-inline-end.

Best Practices

Use border-inline instead of border-left and border-right when building global applications. It ensures your design remains consistent across different writing systems without manual overrides. Always provide a style like solid or dashed, otherwise the border defaults to none and won't show up even if you set a width and color.

Common Pitfalls

The most common mistake is confusing inline with block. Inline follows the direction of a line of text, while block follows the direction that paragraphs are stacked. Also, remember that if you define border-inline-start after border-inline, the specific start value will override that side of the shorthand.

Accessibility

Borders provide visual structure and help users identify the boundaries of interactive elements. Ensure the color you choose has a high enough contrast ratio against the background so users with visual impairments can see where one element ends and another begins.

Dev Data Table: border-inline property

default none
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderInline
js_syntax_2 element.style.setProperty("border-inline", "2px solid #000000")
js_note When manipulating this property in JavaScript, use camelCase or the setProperty method with the kebab-case string.
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...