Border-style

In this chapter we will learn how to use the border-style property.

The border-style property is used to set the style for all four sides of the elements border.

The border-style property is a shorthand property for setting the individual border style properties i.e. border-top-style, border-right-style, border-bottom-style, and border-left-style in a single declaration.

Each side can have its own value.

The default value of border-style is none.

You should also keep in mind that some browsers do not support every kind of style. Usually, where a style keyword is not supported, the browser draws the border as solid.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>
           .dotted{border:3px dotted orange}
           .dashed{border:3px dashed green}
           .solid{border:3px solid pink}
       </style>
   </head>
   <body>
       <p class="dotted"> Example with orange dotted border.</p>
       <p class="dashed"> Example with green dashed border.</p>
       <p class="solid"> Example with pink solid border.</p>
   </body>
</html>

As you can see all sides have the same value.

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

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>
          p{border-style: double  solid dashed dotted }
       </style>
   </head>
   <body>

       <p> Example, where each side has own value.</p>
       
   </body>
</html>

Property Values

Value Descriptions
none This is the default value. Displays no border.
hidden Displays no border like "none" property.
dotted Indicates a dotted border
dashed Indicates a dashed border
solid Indicates a solid border
double Indicates a double border
groove Displays a border leading to a carved effect. It is the opposite of ridge.
ridge Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove.
inset Displays a border that makes the box appear embedded. It is the opposite of outset.
outset Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.