CSS border-inline-end-color Property

This property defines the color of the border on the end side of an element's inline axis, which changes based on the writing direction.

selector { border-inline-end-color: <color>; }
<color> Sets the border color using a keyword, hex, RGB, RGBA, HSL, or HSLA value.
transparent Makes the border color invisible while maintaining its width.
currentcolor Defaults to the computed value of the element's text color property.

Code Examples

A basic example showing a solid red border applied to the logical end of a div.

<div style="border-inline-end-style: solid; border-inline-end-width: 10px; border-inline-end-color: #ff0000; padding: 20px;">
  The red border is on the right side in LTR mode.
</div>

An advanced example using JavaScript to toggle text direction and update the logical border color dynamically.

<div id="box" style="border-inline-end: 8px solid #336699; padding: 20px; writing-mode: horizontal-tb;">
  Directional Box
</div>
<button onclick="toggleDirection()">Swap Direction</button>

<script>
function toggleDirection() {
  const box = document.getElementById("box");
  const currentDir = box.getAttribute("dir");
  if (currentDir === "rtl") {
    box.setAttribute("dir", "ltr");
    box.style.borderInlineEndColor = "#336699";
  } else {
    box.setAttribute("dir", "rtl");
    box.style.borderInlineEndColor = "#ff9900";
  }
}
</script>

Pro Tip

If you want to quickly swap the border from the right to the left for a sidebar or callout box, use the dir="rtl" attribute on a parent container. The border-inline-end-color will automatically flip sides without you having to touch another line of CSS.

Deep Dive

In standard English layouts, the inline-end is the right side of a box because we read from left to right. If you switch to a right-to-left language like Arabic, that finish line moves to the left side. Think of logical properties as directions on a compass rather than fixed wall positions. Instead of saying the east wall is red, you are saying the wall at the end of the path is red. This allows your layout to remain consistent across different global languages without writing separate CSS for every direction.

Best Practices

Use logical properties like border-inline-end-color when building sites intended for a global audience. It future-proofs your UI for internationalization. Always ensure you have also set a border-inline-end-style and border-inline-end-width, otherwise your color will not be visible on the screen.

Common Pitfalls

The most common mistake is forgetting that the border must have a style, such as solid or dashed, before the color will show up. If the style is set to none, which is the default, the color will appear to be broken. Also, keep in mind that this property only targets one specific edge; it does not color the top or bottom edges, which are part of the block axis.

Accessibility

When choosing a color, maintain a high contrast ratio between the border and the background. If the border is used to separate distinct pieces of content or signify a specific state, users with low vision or color blindness must be able to distinguish it clearly.

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

default currentcolor
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2017
js_syntax_1 element.style.borderInlineEndColor = "#ff0000";
js_syntax_2 element.style.setProperty("border-inline-end-color", "#ff0000");
js_note When using JavaScript, camelCase the property name to borderInlineEndColor or use the setProperty method with the original kebab-case string.
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...