CSS border-right-width Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-right-width property changing the thickness of the physical right border
Definition

Definition and Usage

The border-right-width property sets the thickness of an element’s physical right border. You can also set it through the shorthands border-right or border-width.

Use a length such as 4px, or the keywords thin, medium, and thick. The initial value is medium. A visible border-right-style is still required or nothing draws. It is not inherited. Unlike border-inline-end-width, it does not flip in RTL layouts.

Baseline for lengths and keywords.

Not deprecated. thin, medium, thick, and length values are widely available. The newer hairline keyword is limited — prefer lengths or the classic keywords for study and production.

Syntax

CSS Syntax

syntax.css
border-right-width: <length> | thin | medium | thick | initial | inherit;

One non-negative length or keyword. Examples: 4px, 0.25em, thick, 0.

Values

Property Values

ValueDescriptionTry it
<length>An exact thickness such as 4px or 0.25em. Must not be negativeTry it
thinA thin line. Exact size is chosen by the browserTry it
mediumA medium line. Initial valueTry it
thickA thick line. Exact size is chosen by the browserTry it
2emA length relative to the element’s font sizeTry it
0No visible thickness. The style can still be setTry it
initialSets this property to its default value, mediumTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-right-width

Make the right border visible with a style, then set how thick it should be.

  1. Set a visible border-right-style such as solid.
  2. Set border-right-width to a length or to thin, medium, or thick.
  3. Optionally set border-right-color, or use the border-right shorthand for all three.
  4. Use border-inline-end-width when the trailing edge should follow writing direction.
PieceRequired?Role
Visible styleYesWithout solid (or similar), width has nothing to draw
Width valueYes (to control thickness)Length or thin / medium / thick
ColorOptionalDefaults to currentColor
Physical right onlyBy designDoes not move with writing mode or direction
Try it

Live Preview

Style and color stay fixed. Only border-right-width changes.

The right edge is solid blue. Keywords do not guarantee the same pixel size in every browser.

Box

border-right-width: medium

Code

CSS Examples

Each snippet focuses on border-right-width. Style is only there so the width can show. Use Try It Yourself for a live editor.

Example 1 — Pixel Width

Set an exact thickness with a length value.

CSS
<style>
  div {
    border-right-style: solid;
    border-right-width: 4px;
    border-right-color: #2563eb;
    padding: 10px;
  }
</style>

<div>4px right</div>
Try It Yourself

How It Works

  1. Show a line. border-right-style: solid makes the right edge drawable.
  2. Set the thickness. border-right-width: 4px is the lesson — exactly four pixels.
  3. Paint it. Blue makes the edge easy to see. Color is optional; it defaults to currentColor.
  4. One side only. Top, bottom, and left stay without a border from these rules.

Example 2 — thick Keyword

Use a keyword when you want a quick size without picking pixels.

CSS
<style>
  div {
    border-right-style: solid;
    border-right-width: thick;
    border-right-color: #0f766e;
    padding: 10px;
  }
</style>

<div>thick right</div>
Try It Yourself

How It Works

  1. Keep a visible style. Without solid, thick still draws nothing.
  2. Use the keyword. thick asks the browser for a thick line. Exact pixels can vary.
  3. Compare with lengths. Prefer px or rem when every browser must match.
  4. Same pattern for others. thin and medium work the same way. medium is the default.

Example 3 — em Width

Scale the right border with the element’s font size.

CSS
<style>
  div {
    font-size: 16px;
    border-right-style: solid;
    border-right-width: 0.5em;
    border-right-color: #7c3aed;
    padding: 10px;
  }
</style>

<div>0.5em right</div>
Try It Yourself

How It Works

  1. Set a font size. 16px is the base for em on this element.
  2. Use a relative width. 0.5em is half the font size, so about 8px here.
  3. Grow with text. If font-size changes, the right border thickness changes with it.
  4. Still needs a style. The solid style is what makes that relative width visible.

Edge Cases & Pitfalls

If the right width does not show, one of these is usually why.

style

Width alone draws nothing

border-right-width: 8px with style none stays invisible. Set border-right-style or use a shorthand that includes a style.

minus

Negative lengths are invalid

border-right-width: -4px is dropped. Use 0 or a positive length.

order

A later shorthand can wipe the width

border-right: solid #2563eb after your width resets width to medium. Put the width in the shorthand, or set border-right-width after it.

size

Borders add to the box by default

With content-box sizing, a thicker right border grows the element’s outer width. Use box-sizing: border-box to keep width inclusive of the border.

RTL

Physical right does not flip in RTL

The thickness stays on the right even with direction: rtl. Use border-inline-end-width for a logical trailing edge.

Compatibility

Browser Support

border-right-width is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-right-width

Supported in all modern browsers and Internet Explorer for lengths and thin, medium, and thick. The newer hairline keyword is not part of these numbers.

100% Lengths and keywords
Google Chrome All versions
Full support
Mozilla Firefox All versions
Full support
Apple Safari All versions
Full support
Microsoft Edge All versions
Full support
Opera All versions
Full support
Samsung Internet All versions
Full support
Internet Explorer All versions
Full support
border-right-width Widely supported

Bottom line: Safe everywhere for px, em, rem, and thin / medium / thick. Keyword pixel sizes can vary slightly by browser. Prefer lengths when you need an exact match. It is not a runtime API.

Remember

Key Takeaways

  • Role: set how thick the physical right border is.
  • Initial value: medium. Not inherited.
  • Needs a style: without a visible style, any width stays invisible.
  • Physical: always the right side. Use border-inline-end-width for logical trailing edges.

One line: border-right-width sets the right edge thickness — after that edge already has a visible style.

Frequently Asked Questions

It sets the thickness of the physical right border only. Style and color come from other properties or from a shorthand such as border-right.
The initial value is medium. The exact pixel size of thin, medium, and thick is chosen by the browser.
Width alone is not enough. You also need a visible border-right-style such as solid. Color defaults to currentColor if you omit it.
Yes. Any non-negative length works, such as 4px or 0.25em. Negative lengths are invalid.
border-right-width always sets the physical right edge. border-inline-end-width follows writing direction, so it can move to the left in RTL layouts.
It is Baseline and widely available in all modern browsers and Internet Explorer for lengths and thin, medium, and thick. It is a browser CSS property, not a Node.js feature.

Next: border-spacing

Learn how to space cells apart in a separated table border model.

border-spacing 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-right-style Property CSS border-spacing Property