CSS border-inline-end-width Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-inline-end-width property setting the thickness of the logical inline-end border
Definition

Definition and Usage

The border-inline-end-width property sets the thickness of the logical inline-end border. It maps to a physical edge based on writing-mode, direction, and text-orientation.

In default horizontal LTR text, inline-end is usually the right edge, so this property acts like border-right-width. You still need a visible border-inline-end-style or the line will not show. It applies to all elements and is not inherited. The initial value is medium.

Standard-track.

Not deprecated and not experimental. Logical border widths have been widely available since 2020.

Syntax

CSS Syntax

syntax.css
border-inline-end-width: thin | medium | thick | 2px | initial | inherit;

Use a keyword or a non-negative <line-width> length such as 8px. The initial value is medium. Negative lengths are invalid.

Values

Property Values

ValueDescriptionTry it
thinA thin line. Exact pixels depend on the browserTry it
mediumA medium line. This is the initial valueTry it
thickA thick line. Exact pixels depend on the browserTry it
2pxAn exact length. Any non-negative length with a unit worksTry it
8pxA wider exact length, useful when you want a clear dividerTry it
initialSets this property to its default value, mediumTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-inline-end-width

Set a visible style first, then choose how thick the inline-end line should be.

  1. Set border-inline-end-style to something visible, such as solid.
  2. Set border-inline-end-width to a keyword or a length.
  3. Set border-inline-end-color so the line contrasts with the background.
  4. Or use the border-inline-end shorthand for width, style, and color in one line.
PieceRequired?Role
A visible styleYesWith none, any width looks invisible
A width valueYesKeyword or length. medium is the initial
A colorTo see it clearlyLow contrast makes a thin edge hard to notice
Try it

Live Preview

The box keeps a solid blue style. Only border-inline-end-width changes.

In horizontal LTR, inline-end is usually the right edge.

Result

Inline end

border-inline-end-width: medium

Code

CSS Examples

Each snippet shows only what you need for the inline-end width: a thickness, a visible style, and a color. Use Try It Yourself for a live editor.

Example 1 — Exact Pixels

Set an 8px solid line on the inline-end edge. In horizontal LTR, that is the right side.

CSS
<style>
  p {
    border-inline-end-width: 8px;
    border-inline-end-style: solid;
    border-inline-end-color: blue;
  }
</style>

<p>Inline end</p>
Try It Yourself

How It Works

  1. Set the thickness. border-inline-end-width: 8px asks for an eight-pixel line.
  2. Make it visible. border-inline-end-style: solid draws a continuous stroke.
  3. Color the edge. border-inline-end-color: blue sets the ink.
  4. Read the edge. With default horizontal LTR writing, inline-end is the right of the paragraph.

Example 2 — Thick Keyword

Use thick when you want a heavier line without picking an exact pixel size.

CSS
<style>
  p {
    border-inline-end-width: thick;
    border-inline-end-style: solid;
    border-inline-end-color: blue;
  }
</style>

<p>Inline end</p>
Try It Yourself

How It Works

  1. Keep style and color. Only the width value changes from the first example.
  2. Use a keyword. thick is a named line width, next to thin and medium.
  3. Expect browser sizing. Keywords do not promise one exact pixel value across every browser.
  4. Pick pixels for control. When the UI needs an exact thickness, prefer 2px or 8px.

Example 3 — RTL Flips the Physical Side

The same logical width moves to the left when the direction is right-to-left.

CSS
<style>
  p {
    direction: rtl;
    border-inline-end-width: 8px;
    border-inline-end-style: solid;
    border-inline-end-color: blue;
  }
</style>

<p>Inline end</p>
Try It Yourself

How It Works

  1. Flip the inline axis. direction: rtl makes text flow right to left.
  2. Keep the logical width. The same border-inline-end-width: 8px still targets the end of that flow.
  3. Watch the physical edge move. The thick line appears on the left, not the right.
  4. Why not border-right-width? A physical right width would stay on the right in RTL. Logical widths stay on the trailing edge.

Edge Cases & Pitfalls

If the thickness seems missing, check the style first.

style

Width needs a visible style

If border-inline-end-style is none, any width looks like no border. Set solid or another visible keyword.

minus

Negative lengths are invalid

border-inline-end-width: -2px is ignored. Use 0 or a positive length.

right

Not the same as border-right-width

border-right-width always hits the physical right. This property follows the inline-end side when direction or writing-mode changes.

short

The shorthand can overwrite the width

border-inline-end sets width, style, and color together. Writing the shorthand after border-inline-end-width replaces that width.

keys

Keywords are not exact pixels

thin, medium, and thick can differ slightly by browser. Use a length when the design needs a fixed size.

Compatibility

Browser Support

border-inline-end-width is a browser layout property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2020

border-inline-end-width

Chrome 69+, Firefox 41+, Safari 12.1+, Edge 79+. Internet Explorer has no support.

97% modern browsers
Google Chrome 69+
Full support
Mozilla Firefox 41+
Full support
Apple Safari 12.1+
Full support
Microsoft Edge 79+
Full support
Opera 56+
Full support
Samsung Internet 10.1+
Full support
Internet Explorer No support
None
border-inline-end-width Widely supported

Bottom line: Safe for modern browsers. For Internet Explorer, use a physical fallback such as border-right-width when you only need horizontal LTR layouts.

Remember

Key Takeaways

  • Role: the thickness of the logical inline-end border.
  • Style first: with none, any width looks invisible.
  • Logical: follows writing direction. Not locked to the physical right.
  • Initial: medium. Prefer lengths when you need exact pixels.

One line: border-inline-end-width sets how thick the trailing inline edge is; writing direction chooses which physical side that is.

Frequently Asked Questions

It sets the thickness of the logical inline-end border. In horizontal left-to-right text that is usually the right edge. In RTL, the same property follows the left edge.
The initial value is medium. The exact pixel size of thin, medium, and thick can vary slightly by browser.
Width alone is not enough when the style is none. Set a visible border-inline-end-style such as solid, and usually a color that contrasts with the background.
border-right-width always sets the physical right edge. border-inline-end-width follows writing-mode, direction, and text-orientation.
Use one value at a time: a keyword such as thick, or a length such as 8px. Negative lengths are invalid.
Chrome 69+, Firefox 41+, Safari 12.1+, and Edge 79+ support it. Internet Explorer does not. It is a browser layout property, not a Node.js feature.

Next: border-inline-start

Set the logical start-side border in one shorthand.

border-inline-start tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-inline-end-style Property CSS border-inline-start Property