CSS border-right-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-right-width property specifies the thickness of an element’s right-hand border edge. It applies to the right side only and determines how much horizontal space the border occupies along that side of the element’s box. Whether that thickness results in any visible border depends on the border’s style; if the border style is set to a value that suppresses painting, the width will still be present in computed layout but nothing will be drawn. See border-style for more on how style affects rendering.

As part of the box model, the right border’s width contributes to the element’s outer dimensions and therefore affects layout and available content area. How that contribution affects the element’s total size depends on the box-sizing mode in use: for example, different box-sizing modes change whether borders (and padding) are included in or added to the element’s specified width and height. For details, consult box-sizing. Changing the right border width can also affect adjacent elements, wrapping, and overflow behavior because it alters the space the element occupies.

You can set the right border width directly or as part of broader border shorthands; when configured via a shorthand, the side-specific value may be overridden by the shorthand’s settings. The property is not inherited from ancestors, so each element’s right border width is determined by its own declarations or by shorthands applied to it. If you prefer to set all sides uniformly or reset many border properties at once, consider using the shorthand approach described in border.

Definition

Initial value: medium
Applies to: All elements
Inherited: No
Computed value: Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable: Yes
JavaScript syntax: object.style.borderRightWidth

Interactive Demo

border-right-width: 4px;

border-right-width: 1em;

border-right-width: thick;

border-right-width: 9mm;

border-right-width: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-right-width: <line-width>

Values

<line-width> = <length> | thin | medium | thick

thinLess than the default width.
mediumDefault value.
thickGreater than the default width.
<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
inherit

Example

HTML

<div class="container">

    <div class="box thin">Border-right-width: thin</div>

    <div class="box medium">Border-right-width: medium</div>

    <div class="box thick">Border-right-width: thick</div>

    <div class="box custom">Border-right-width: 12px</div>

</div>

CSS

.container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: #f7f7f7;
}

.box {
    width: 160px;
    padding: 16px;
    border-style: solid;
    border-color: #333;
    border-right-width: 2px; /* default fallback */
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.box.thin {
    border-right-width: thin;
}

.box.medium {
    border-right-width: medium;
}

.box.thick {
    border-right-width: thick;
}

.box.custom {
    border-right-width: 12px;
}

Result

Editor

Browser Support

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