CSS border-inline-end-width Property

Sets the thickness of an element's logical inline-end border, which adjusts based on the text direction and writing mode.

selector { border-inline-end-width: value; }

thin	Sets a thin thickness for the logical inline-end border.
medium	Sets a medium thickness for the logical inline-end border.
thick	Sets a thick thickness for the logical inline-end border.
<length>	Defines the border thickness using specific units like px, em, rem, or vh.

Code Examples

A basic example showing how the border width applies to the left side when the text direction is set to Right-to-Left.

<div style="border-inline-end-width: 8px; border-inline-end-style: solid; border-inline-end-color: #ff0000; padding: 20px; direction: rtl;">This box has a thick border on its logical end, which is the left side in RTL mode.</div>

An advanced example using JavaScript to dynamically increase the logical border width and update its color upon a button click.

<div id="dynamicBox" style="border-inline-end-style: dashed; border-inline-end-color: #0000ff; padding: 20px; border-inline-end-width: 2px;">Interact to grow the logical border.</div>
<button onclick="growBorder()">Increase Width</button>
<script>
function growBorder() {
  const el = document.getElementById("dynamicBox");
  const currentWidth = parseInt(window.getComputedStyle(el).borderInlineEndWidth);
  el.style.borderInlineEndWidth = (currentWidth + 5) + "px";
  el.style.borderInlineEndColor = "#22bb33";
}
</script>

Pro Tip

You can use this property in combination with CSS calc() to create dynamic border thicknesses that scale based on the viewport or other layout variables, keeping your logical UI fluid and responsive.

Deep Dive

Think of this property as a smart border. In a standard English layout, which is Left-to-Right (LTR), the inline-end is the right side. However, if the layout switches to Right-to-Left (RTL) for a language like Arabic, the inline-end automatically flips to the left side. By using this logical property instead of a physical one like border-right-width, you ensure your design adapts to the reader's flow without writing extra CSS. It specifically targets only the width of that edge; you still need a border-style for it to be visible to the user.

Best Practices

Use logical properties like this one when building global applications that support multiple languages. It reduces the amount of code you have to maintain because you do not have to manually override physical properties when switching from LTR to RTL. Always define a border-style alongside this property, as the default style is none, which makes the width invisible.

Common Pitfalls

The biggest trap is forgetting that this only sets the width. If you don't see a border, check if you actually defined a border-inline-end-style. Also, remember that this property depends on the direction and writing-mode properties of the element or its parent. If those change, the physical location of this border will change too.

Accessibility

Ensure the thickness of your borders provides enough visual contrast for users to distinguish between different content sections. Thin borders can be hard to see for users with visual impairments, so consider using at least 2px or high-contrast colors for important structural boundaries.

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

default	medium
animatable	yes
inherited	no
experimental	no
year_intro	2015
year_standard	2021
js_syntax_1	element.style.borderInlineEndWidth = "5px";
js_syntax_2	element.style.setProperty("border-inline-end-width", "5px");
js_note	When manipulating logical properties in JavaScript, camelCase is used for the style object property, or the full kebab-case string when using the setProperty method.
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 }