X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS border-style Property

CSS border-style property sets the style of all four sides of an element’s borders. It is a shorthand property for defining the border-top-style, border-bottom-style, border-left-style, border-right-style.

This property can have from one to four values. So each side can have its own value.

The default value of border-style is none. Borders are placed on top of the element’s background.

You also need to know that some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.

The border-style property may be specified using one, two, three, or four values. When one value is specified, it applies the same style to all four sides. When two values are specified, the first style applies to the top and bottom sides, the second to the left and right sides. When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom side. When four values are specified, the styles apply to the top, right, bottom, and left, like a clockwise order.

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

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      border-style: dotted;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

As you can see in the given example, all the sides have the same value.

Now let's see an example where each side has its own value.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
        p {
      border-width: 4px;
      border-style: double solid dashed dotted;
      border-color: #1c87c9;
      color: #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example, where each side has own value.</p>
  </body>
</html>

Let’s see another example where all the four values are used.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #eee;
      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: #c9c5c5;
      border: 8px solid #1c87c9;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-style example classes */
      .b1 { border-style: hidden; }
      .b2 { border-style: dotted;}
      .b3 { border-style: dashed;}
      .b4 { border-style: solid;}
      .b5 { border-style: double;}
      .b6 {border-style: groove;}
      .b7 {border-style: ridge;}
      .b8 {border-style: inset;}
      .b9 {border-style: outset;}
    </style>
  </head>
  <body>
    <h2>Border-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 Will show no border. Default value.
hidden The same as "none", except in border conflict resolution for table elements.
dotted The border is specified as a series of dots.
dashed The border is specified as a series of dashes.
solid The border is specified as a solid lines.
double The border is specified as a double solid lines.
groove It’s a 3D grooved border and gives the impression that the border is carved. Opposite of ridge.
ridge Specifies a 3D ridged border and gives the impression of extruded appearance. Opposite of groove.
inset It’s a 3D effect that make impression that the element appear embedded. Opposite of outset.
outset It’s a 3D effect that make impression that the element appear embossed. Opposite of inset.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

Easy tool for generating CSS border style code.

Border, border-top-style, border-bottom-style, border-left-style, border-right-style, <style>.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which of the following is not a valid border-style property value?



Do you find this helpful?

Related articles