CSS border-inline-end-style Property

Description

The border-inline-end-style is a CSS property used to define the style of the inline-end border of an element. In a horizontal writing mode (e.g., left-to-right), this property controls the style of the right border, while in a vertical writing mode (e.g., top-to-bottom), it controls the style of the bottom border. You can set it to values like "solid," "dotted," "dashed," or "none" to determine the visual appearance of the border. It's particularly useful for creating complex layouts and designs that require fine-grained control over individual borders within an element.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
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>This is a box with a border around it.</div>

CSS

div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline-end: 4px red;
  border-inline-end-style: solid;
}

Result

Editor