This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



CSS border-right-style Property

The CSS border-right-style property is used to set the style of an element's right border.

The border-right-style property is specified as a single keyword chosen from those available for the border-style property. The border-style property is used to set the style for all four sides of an element, but border-right-style sets a style only for the right border.

The default width of the right border is medium. It can be changed by using either the border-right-width or border-width properties.

Not all browsers render the styles in the same way. Chrome, for instance, currently renders the dots as rectangular dots, not circular ones.

The specification does not specify the amount of spacing between the dots and the dashes.

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

Initial Value none
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable No
Version CSS1
DOM Syntax object.style.borderRightStyle = "dashed";

Syntax

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-right-style: solid;
      }
      p {
      border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with solid border-right-style.</h2>
    <p>A paragraph with dotted border-right-style.</p>
  </body>
</html>

Look at an example where all the style values are used in order to see the difference between them:

Depending on the value of the border-color, the effects of groove, ridge, inset and outset values can be changed.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #c9c5c5;
      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;
      background-color: #1c87c9;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-right-style example classes */
      .b1 { border-right-style: hidden; }
      .b2 {border-right-style: dotted;}
      .b3 {border-right-style: dashed;}
      .b4 {border-right-style: solid;}
      .b5 {border-right-style: double;}
      .b6 {border-right-style: groove;}
      .b7 {border-right-style: ridge;}
      .b8 {border-right-style: inset;}
      .b9 {border-right-style: outset;}
    </style>
  </head>
  <body>
    <h2>Border-right-style value examples</h2>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div  class="b2">
        dotted
      </div>
      <div  class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Values

Value Description
none Defines that there won't be any border.
Default value.
hidden Is the same with "none" except in border conflict resolution for table elements.
dotted Defines a dotted border.
dashed Defines a dashed border.
double Defines a double border.
solid Defines a solid border.
groove Defines a 3D grooved border. Its effect can be changed with the value of border-color.
ridge Defines a 3D ridged border. Its effect can be changed with the value of border-color.
inset Defines a 3D inset border. Its effect can be changed with the value of border-color.
outset Defines a 3D outset border. Its effect can be changed with the value of border-color.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

1+ 5.5+ 1+ 1+ 9.2+