CSS border-right-width Property

The CSS border-right-width property sets the width (thickness) of an element’s right border only. It controls just one side, which makes it useful when you want an asymmetric border — for example, a thick accent line on the right of a sidebar or pull-quote while the other three sides stay thin or absent.

You can also set the right border width through the border or border-width shorthand properties. Reach for border-right-width when you specifically need to override or tune one side without touching the others.

Why a border style is required first

A border has no visible width unless it also has a style. If you set border-right-width but leave the right border style at its default (none), nothing renders — a none border collapses to zero regardless of the width you ask for. So always declare a style first, using border-right-style, border-style, or the border shorthand. To also set the color, see border-right-color.

/* Width alone does nothing — there is no style to give it a width. */
.broken {
  border-right-width: 8px;
}

/* Style + width — now the 8px right border is visible. */
.works {
  border-right-style: solid;
  border-right-width: 8px;
}

Info

The specification doesn't define the exact thickness of each keyword. However, they always follow this order: thin ≤ medium ≤ thick.

Info

The specification does not define how borders of different width and styles connect in the corners.

Initial Value	medium
Applies to	All elements. It also applies to ::first-letter.
Inherited	No
Animatable	Yes. The width of the border is animatable.
Version	CSS1
DOM Syntax	object.style.borderRightWidth = "5px";

Syntax

Syntax of CSS border-right-width Property

border-right-width: medium | thin | thick | length | initial | inherit;

Example of the border-right-width property:

Example of CSS border-right-width Property with thick value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        width: 50%;
        border-style: dotted;
        border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-right-width example</h2>
    <p>As you can see the width of the right border is set to thick.</p>
  </body>
</html>

Try it Yourself »

Example of the border-right-width property with all the values:

Example of CSS border-right-width Property with medium, thin, thick , px, initial and inherit values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {
        border-right-width: medium;
      }
      .b2 {
        border-right-width: thin;
      }
      .b3 {
        border-right-width: thick;
      }
      .b4 {
        border-right-width: 10px;
      }
      .b5 {
        border-right-width: initial;
      }
      .b6 {
        border-right-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Try it Yourself »

Result

![CSS border-right-width Property](/uploads/media/default/0001/03/ed2548511ad8d4ee5076d931f7bb68eeb452cec5.png "CSS border-right-width Property" =420x)

Values

Value	Description	Play it
medium	Defines medium right border. It is the default value of this property.	Play it »
thin	Defines a thin right border. It is up to the user agent to determine the exact width.	Play it »
thick	Defines a thick right border. It is up to the user agent to determine the exact width.	Play it »
length	Defines the thickness of the right border as an explicit length. For example, 10px, 5em, 8pt, etc. Negative values are not allowed.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

border-right-style — required before the width is visible.
border-right-color — sets the color of the right border.
border-right — shorthand for the right border's width, style, and color.
border-width — sets the width of all four sides at once.
border-left-width, border-top-width, border-bottom-width — the other per-side width properties.

Practice

What does the CSS property 'border-right-width' specify?

It specifies the color of the right border.It specifies the width of the right border.It specifies the style of the right border.It specifies the size of the right margin.