CSS border-inline-end-style Property

Description

The border-inline-end-style CSS property controls the style of the border drawn on an element’s inline-axis "end" edge - in other words, the side that corresponds to the end of a line of text in the element’s writing context. Because it is a logical property, the physical side it affects (for example left or right in a horizontal writing mode) depends on the element’s writing direction and orientation. That makes border-inline-end-style especially useful when you want borders to adapt automatically for different languages and layouts without writing separate rules for left/right or start/end.

This property participates in the usual relationship between longhand and shorthand border rules: shorthands that set border styles more broadly will interact with it, and individual side properties can override or be overridden depending on cascade order. For example, a shorthand that specifies styles for all sides can set the inline end style indirectly, while a later-specific rule for the inline end side will replace that value. See the related shorthand and grouped property references for how combined assignments and cascade behavior work: border and border-style.

Because it is a logical property, border-inline-end-style ties into layout direction and writing-mode considerations: the element’s inline axis is determined by properties such as writing-mode and direction, so changes to those can change which physical edge the inline-end style maps to. For authoring internationalized or direction-aware interfaces, using logical border properties (including the inline-start counterpart) reduces duplication and prevents errors when flipping layouts for different scripts; see the counterpart property border-inline-start-style for symmetry when you need to control both inline sides.

In practice, you use border-inline-end-style whenever you need a border style tied to the document’s logical flow rather than a fixed physical side. It works in concert with the rest of the border model (colors, widths and the cascade) so that a complete visible border is the result of style, width and color being set in combination. Because it is not an inherited property, it must be set on each element you want it to affect or be provided via a rule that targets that element specifically; cascade, specificity and the order of declarations determine the final applied style.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.borderInlineEndStyle

Interactive Demo

border-inline-end-style: solid;
writing-mode: horizontal-tb;

border-inline-end-style: dotted;
writing-mode: vertical-rl;

border-inline-end-style: dashed;
writing-mode: horizontal-tb;

border-inline-end-style: double;
writing-mode: vertical-lr;

Example of the Border
Inline End Style Property

Syntax

border-inline-end-style: <border-style>

Values

<border-style>Specifies the style of the border

Example

HTML

<div class='examples'>

  <h2>LTR examples</h2>

  <div class='group' dir='ltr'>

    <div class='example'>

      <span class='label'>solid</span>

      <div class='box solid'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>dashed</span>

      <div class='box dashed'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>dotted</span>

      <div class='box dotted'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>double</span>

      <div class='box double'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>groove</span>

      <div class='box groove'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>ridge</span>

      <div class='box ridge'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>inset</span>

      <div class='box inset'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>outset</span>

      <div class='box outset'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>none</span>

      <div class='box none'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>hidden</span>

      <div class='box hidden'>Inline end border</div>

    </div>

  </div>



  <h2>RTL examples</h2>

  <div class='group' dir='rtl'>

    <div class='example'>

      <span class='label'>solid</span>

      <div class='box solid'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>dashed</span>

      <div class='box dashed'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>dotted</span>

      <div class='box dotted'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>double</span>

      <div class='box double'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>groove</span>

      <div class='box groove'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>ridge</span>

      <div class='box ridge'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>inset</span>

      <div class='box inset'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>outset</span>

      <div class='box outset'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>none</span>

      <div class='box none'>Inline end border</div>

    </div>

    <div class='example'>

      <span class='label'>hidden</span>

      <div class='box hidden'>Inline end border</div>

    </div>

  </div>

</div>

CSS

body {
  margin: 20px;
  font-family: system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #222;
  background: #f7f7f8;
}

.examples {
  max-width: 920px;
  margin: 0 auto;
}

h2 {
  font-size: 16px;
  margin: 18px 0 10px;
}

.group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.example {
  width: 200px;
}

.label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.box {
  background: #fff;
  padding: 12px;
  border-inline-end-width: 6px;
  border-inline-end-color: #1a73e8;
  border-inline-end-style: solid;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.box.solid { border-inline-end-style: solid; }
.box.dashed { border-inline-end-style: dashed; }
.box.dotted { border-inline-end-style: dotted; }
.box.double { border-inline-end-style: double; }
.box.groove { border-inline-end-style: groove; }
.box.ridge { border-inline-end-style: ridge; }
.box.inset { border-inline-end-style: inset; }
.box.outset { border-inline-end-style: outset; }
.box.none { border-inline-end-style: none; }
.box.hidden { border-inline-end-style: hidden; }

/* small indicators to show writing direction */
.group[dir='ltr'] .box::after {
  content: 'LTR';
  font-size: 11px;
  color: #888;
  margin-left: 8px;
}

.group[dir='rtl'] .box::after {
  content: 'RTL';
  font-size: 11px;
  color: #888;
  margin-right: 8px;
}

Result

Editor

Browser Support

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