CSS border-inline-end-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-inline-end-width property controls the thickness of the border placed on an element’s inline end edge - that is, the logical edge that corresponds to the end of a line of text in the element’s writing direction. Because it is a logical property, authors use it when they want border sizing to follow the flow of text rather than a hard physical side; this makes styles more resilient across different writing modes and text directions. It’s commonly set together with other border properties to produce the intended visual and layout effects for the inline end edge.

Which physical side the inline end maps to depends on the element’s writing system and base text direction. The mapping is determined by the writing-mode and direction properties: in a left-to-right horizontal flow the inline end is the right edge, while in a right-to-left flow it becomes the left edge; in vertical writing modes the inline end corresponds to one of the top/bottom physical edges. Because of this, using border-inline-end-width allows the same CSS to adapt automatically when an author switches languages or writing mode.

This property interacts with other border-related properties. Whether the border is actually drawn is controlled by border-style, and the color is set by border-color. Broad, compound declarations such as border-width and the logical shorthand border-inline-width can override or set multiple sides at once; likewise, the logical counterpart border-inline-start-width is used for the opposite inline edge. In the cascade, specific longhand settings for the inline end edge take precedence over earlier shorthand or less specific rules.

In layout terms, the value you set for this property occupies space in the element’s box and affects how content and adjacent boxes are sized and positioned. Because it is a sizing property rather than a purely decorative one, changes to border-inline-end-width can influence box metrics such as available content width. For internationalized or bidirectional designs, preferring logical properties like border-inline-end-width over physical ones simplifies maintenance and reduces the need for direction-specific overrides.

Definition

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 class="container">

    <div class="box" dir="ltr">LTR box

      <br>

      border-inline-end-width: 8px

    </div>

    <div class="box" dir="rtl">RTL box

      <br>

      border-inline-end-width: 16px

    </div>

</div>

CSS

.container {
    display: flex;
    gap: 20px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.box {
    padding: 16px;
    min-width: 200px;
    border: 2px solid #ccc;
    border-inline-end-style: solid;
    border-inline-end-color: #007bff;
    border-radius: 6px;
}

.box[dir="ltr"] {
    border-inline-end-width: 8px;
}

.box[dir="rtl"] {
    border-inline-end-width: 16px;
}

Result

Editor

Browser Support

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