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;

Syntax

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

Values

• <border-style>Specifies the style of the border

Example

<div>This is a box with a border around it.</div>

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

Browser Support

The following table will show you the current browser support for the CSS border-inline-end-style property.

Desktop
79	69	41	56	12.1

Tablets / Mobile
69	41	48	12.2	10	69

Last updated by CSSPortal on: 1st January 2024