CSS border-inline-end-style Property

Sets the line style for the logical inline-end border of an element, which maps to a physical border style based on the writing mode and direction.

selector { border-inline-end-style: value; }
none Specifies that no border is drawn, making the border width zero.
hidden Same as none, but used specifically to resolve border conflicts in table elements.
dotted Renders the border as a series of round dots.
dashed Renders the border as a series of short line segments.
solid Renders the border as a single, continuous solid line.
double Renders two parallel solid lines with some space between them.
groove Creates a 3D effect that looks like the border is carved into the page.
ridge Creates a 3D effect that looks like the border is coming out of the page.
inset Makes the element appear as if it is embedded into the page.
outset Makes the element appear as if it is embossed or popping out of the page.

Code Examples

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

<div style="border-inline-end-style: dashed; border-inline-end-width: 5px; border-inline-end-color: #ff0000; padding: 10px;">This box has a dashed border at the end of the inline direction.</div>

An advanced example using JavaScript to toggle text direction, demonstrating how the logical border style automatically moves to the opposite side.

<div id="contentBox" style="border-inline-end: 4px solid #333333; padding: 20px; direction: ltr;">
  Click the button to flip the direction of this element.
</div>
<button onclick="toggleDirection()">Toggle RTL/LTR</button>

<script>
function toggleDirection() {
  const box = document.getElementById("contentBox");
  const currentDir = box.style.direction;
  box.style.direction = currentDir === "ltr" ? "rtl" : "ltr";
  // Using JS to change a different property to highlight the border style change
  box.style.borderInlineEndStyle = "double";
}
</script>

Pro Tip

If you want to style the entire end border including its width and color in one go, use the shorthand property border-inline-end. It keeps your CSS clean and much easier to manage than declaring three separate properties.

Deep Dive

Think of the inline-end as the finish line of a row of text. In a standard English layout, text flows from left to right, so the inline-end is the right side. However, in Right-to-Left (RTL) languages like Arabic or Hebrew, the finish line is on the left. This property is a logical property, meaning it is smart enough to flip sides automatically based on the document's direction or writing mode. Instead of hard-coding a right border that might look wrong in an RTL layout, you use border-inline-end-style to ensure the border always stays at the end of the sentence flow, regardless of the language.

Best Practices

Use this property when building international applications to avoid writing separate CSS overrides for RTL layouts. Always pair this with a defined border-inline-end-width and border-inline-end-color, because the default style is none, meaning the border won't show up at all unless you explicitly define a visible style like solid or dashed.

Common Pitfalls

The most common headache is forgetting that this property does nothing if the border width is zero or the style is set to none or hidden. Also, beginners often confuse inline with block; remember that inline refers to the direction text travels in a line, while block refers to the direction blocks of content are stacked.

Accessibility

Ensure that the style you choose provides enough visual distinction for the user. High-contrast solid borders are generally better for accessibility than thin dotted or dashed lines, which can be hard to see for users with visual impairments.

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

default none
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderInlineEndStyle = "dashed";
js_syntax_2 element.style.setProperty("border-inline-end-style", "dashed");
js_note When manipulating logical properties in JavaScript, ensure you use the camelCase version for direct style object access or the exact kebab-case string for 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 }
results render here...