CSS Portal

CSS border-inline-end-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-inline-end-color property controls the color used to paint the border on an element’s inline-end edge - that is, the end side of the inline axis for the box. Because it is a logical property, its meaning depends on an element’s text-progression and writing direction rather than a fixed physical edge; this makes it useful when styling layouts that must adapt to different writing modes or right-to-left languages. The property only affects the color; whether that border is actually visible depends on the element’s border style and width.

Which physical edge the inline end corresponds to is determined by layout orientation and text direction. The mapping is driven by the document’s writing mode and base direction, so the same rule can target different physical sides in different contexts; for example the inline end can correspond to the physical right edge in a left-to-right horizontal flow, but to the left edge in a right-to-left context. These mappings follow the values of writing-mode and direction, enabling styles that automatically adapt without needing separate left/right rules.

In the cascade and shorthand model, border-inline-end-color participates alongside other border color properties. It will interact with the overall border-color shorthand and with its logical counterpart border-inline-start-color; more specific longhands take precedence over broader shorthands according to normal cascade rules. Note that the color you set will only be painted when the corresponding border side has a visible style and width - properties such as border-style and border-width determine whether the border is drawn at all.

Practically, using border-inline-end-color simplifies theming and internationalization because you can set logical-edge styling once and have it apply correctly across different writing systems and directions. It also helps keep CSS concise when combined with other logical properties for borders and padding, avoiding duplication of left/right rules. Finally, because it targets only the inline-end edge’s color, it is often used in combination with the corresponding start color and with overall border settings to achieve consistent multi-directional designs.

Definition

Initial value
currentcolor
Applies to
all elements
Inherited
no
Computed value
computed color
Animatable
by computed value type
JavaScript syntax
object.style.borderInlineEndColor

Interactive Demo

Example of the Border
Inline End Color Property

Syntax

border-inline-end-color: <color>

Values

  • <color>Specifies the color of the border

Example

<main class="examples">
<h1>border-inline-end-color demo</h1>

<div class="box ltr">
This box is LTR. The inline end is the right side. The inline-end border is red.
</div>

<div class="box rtl" dir="rtl">
هذا المربع RTL. The inline end is the left side. The inline-end border is blue.
</div>
</main>
/* Styles for the demo */
* {
    box-sizing: border-box;
}
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 2rem;
    background: #ffffff;
    color: #111827;
}
.examples {
    max-width: 720px;
    margin: 0 auto;
}
h1 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.box {
    background: #f8fafc;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e6edf3; /* subtle frame */

    /* Logical properties used here */
    border-inline-end-width: 8px;
    border-inline-end-style: solid;
    border-inline-end-color: #e63946; /* red for LTR example */
}

/* In RTL the inline end flips to the left side */
.box.rtl {
    border-inline-end-color: #1d4ed8; /* blue for RTL example */
}

Browser Support

The following information will show you the current browser support for the CSS border-inline-end-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!