CSS border-inline-end Property

This property sets the border at the end of an element's inline dimension, adapting automatically to the language direction or writing mode.

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

Code Examples

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

<div style="border-inline-end: 5px solid #007bff; padding: 10px;">
  This box has a blue border at the end of its inline flow.
</div>

Advanced example showing how the border automatically flips from the right to the left side when the text direction is changed via JavaScript.

<div id="contentBox" style="border-inline-end: 8px dashed #28a745; padding: 20px; direction: ltr;">
  Watch the border move when you toggle the direction.
</div>
<button onclick="toggleDir()">Toggle Direction</button>

<script>
function toggleDir() {
  const box = document.getElementById("contentBox");
  box.style.direction = box.style.direction === "ltr" ? "rtl" : "ltr";
  box.style.borderInlineEnd = "8px dashed #dc3545";
}
</script>

Pro Tip

If you want to quickly clear a border that was set by a previous rule without knowing if the site is LTR or RTL, just set border-inline-end to none. It is a much smarter way to handle dynamic layouts than trying to guess which physical side the border is on.

Deep Dive

Think of your web page like a physical book. In English, we read left to right, so the end of a line is on the right side. In languages like Arabic or Hebrew, the end is on the left. Using border-inline-end is like telling the browser to put a border at the finish line of the text, regardless of which way the runners are heading. It is a shorthand property that manages width, style, and color in one go. If the writing-mode is set to vertical, the end might even be the bottom of the element. It removes the need for you to hard-code left or right borders when building sites for a global audience.

Best Practices

Use this property instead of border-right or border-left when your project needs to support multiple languages. It keeps your CSS clean because you won't have to write extra code to flip borders for Right-to-Left (RTL) layouts. It is most effective when paired with other logical properties like padding-inline and margin-inline to maintain a consistent look across all cultures.

Common Pitfalls

A common mistake is forgetting that this is a shorthand. If you only provide a color, the width and style might reset to their defaults, which usually results in no border being visible at all. Also, keep in mind that if you have a vertical writing mode, your inline-end border will appear at the bottom or top depending on the specific mode, which can be confusing if you are only used to horizontal layouts.

Accessibility

Borders provide essential visual cues for separating content. When using logical properties, ensure that your border color provides a high enough contrast ratio against the background so that users with visual impairments can clearly see the boundaries of your elements. Using logical properties actually helps accessibility for global users by ensuring the visual structure matches their native reading direction.

Dev Data Table: border-inline-end property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2021
js_syntax_1 element.style.borderInlineEnd = "5px solid #ff0000";
js_syntax_2 element.style.setProperty("border-inline-end", "5px solid #ff0000");
js_note In JavaScript, remember that logical properties like this are mapped to the camelCase version borderInlineEnd when accessed directly via the style object.
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...