CSS border-inline-end Property

Description

The border-inline-end CSS property is used to define the styling of the border on the end side of an inline element within a block context. This property is particularly useful in situations where text or inline content needs different border styles on its trailing side, which can vary depending on the writing direction (left-to-right or right-to-left) in languages like Arabic or Hebrew. By specifying values for border-inline-end, web developers can control the border's width, style, and color on the side that corresponds to the end of the text direction, ensuring precise and context-appropriate border design for inline elements.

Initial value

See individual properties

Applies to

all elements

Inherited

no

Computed value

See individual properties

Animatable

See individual properties

JavaScript syntax

object.style.borderInlineEnd

Interactive Demo

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

border-inline-end: dashed blue; 
writing-mode: vertical-rl;

border-inline-end: 1rem dashed;
writing-mode: horizontal-tb;

border-inline-end: 5px double #E1341E;
writing-mode: vertical-lr;

Syntax

border-inline-end: <border-width> | <border-style> | <color>

Values

• <border-width>Specifies the width of the border
• <border-style>Specifies the style of the border
• <color>Specifies the color 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 dashed red;
}

Browser Support

The following table will show you the current browser support for the CSS border-inline-end 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