CSS border-inline-end-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-inline-end-width CSS property is used to specify the width of the border on the "end" inline side of an element, which depends on the writing mode of the text. In horizontal writing modes like English (left-to-right), this property corresponds to the right border, while in vertical writing modes, it could represent the bottom border. It allows web developers to precisely control the thickness of this specific border edge, making it a useful tool for creating custom and responsive designs tailored to different text orientations and layouts on a webpage.

Initial value: medium
Applies to: all elements
Inherited: no
Computed value: absolute length; 0 if the border style is none or hidden
Animatable: by computed value type
JavaScript syntax: object.style.borderInlineEndWidth

Interactive Demo

border-inline-end-width: 5px;
writing-mode: horizontal-tb;

border-inline-end-width: 1rem;
writing-mode: vertical-rl;

border-inline-end-width: thin;
writing-mode: horizontal-tb;

border-inline-end-width: thick;
writing-mode: vertical-lr;

Example of the Border
Inline End Width Property

Syntax

border-inline-end-width: <border-width>

Values

<border-width>Specifies the width 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: dashed red;
  border-inline-end-width: 8px
}

Result

Editor