CSS border-style Property

CSS border-style property sets the style for the border like solid line, double line, dotted line, etc.

border-style property can be set with the values from the following predefined values. The table provides the values, descriptions, and examples for each of them.

ValueDescriptionExample
noneNo border.border-style: none;
hiddenSame as “none”.
except in border conflict resolution for table elements		border-style: hidden;
dottedA dotted borderborder-style: dotted;
dashedA dashed borderborder-style: dashed;
solidA solid borderborder-style: solid;
doubleA double borderborder-style: double;
grooveA 3D grooved border.border-style: groove;
ridgeA 3D ridged border.border-style: ridge;
insetSpecifies a 3D inset border.border-style: inset;
outsetSpecifies a 3D outset border.border-style: outset;
initialSets this property to its default value.border-style: initial;
inheritInherits this property from its parent element.border-style: inherit;

none is the default value to border-style property.

border-style for the four borders: top, right, bottom, and left; of HTML Element(s) can be specified in different ways based on the number of values we provide to this property.

border-style with four values

</>
Copy
border-style: solid dotted dashed double;
           /*  top  right  bottom left   */

border-style with three values

</>
Copy
border-style: solid dotted dashed;
           /*  top  right  bottom   */
           /*       left            */

border-style with two values

</>
Copy
border-style: solid    dotted;
           /*  top     right           */
           /*  bottom  left            */

border-style with three values

</>
Copy
border-style: solid;
           /*  top      */
           /*  right    */
           /*  bottom   */
           /*  left     */

border-style with different number of values

In the following example, we specify border-style for four div elements with different number of values.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 100px;
            width: 100px;
            display: inline-block;
            margin: 10px;
            border-width: 4px;
        }
        #div1 {
            border-style: solid dotted dashed double;
        }
        #div2 {
            border-style: solid dotted dashed;
        }
        #div3 {
            border-style: solid dotted;
        }
        #div4 {
            border-style: solid;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

border-style with different values

In the following example, we set border-style of different div elements with different allowed values for border-style.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 100px;
            width: 100px;
            display: inline-block;
            margin: 10px;
            border-width: 4px;
            text-align: center;
        }
        #div1 {
            border-style: dotted;
        }
        #div2 {
            border-style: dashed;
        }
        #div3 {
            border-style: solid;
        }
        #div4 {
            border-style: double;
        }
        #div5 {
            border-style: groove;
        }
        #div6 {
            border-style: ridge;
        }
        #div7 {
            border-style: inset;
        }
        #div8 {
            border-style: outset;
        }
    </style>
</head>
<body>
    <div id="div1">dotted</div>
    <div id="div2">dashed</div>
    <div id="div3">solid</div>
    <div id="div4">double</div>
    <div id="div5">groove</div>
    <div id="div6">ridge</div>
    <div id="div7">inset</div>
    <div id="div8">outset</div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-style property, and how to use this property for HTML Elements, with examples.