CSS border-style - Examples

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.

Value	Description	Example
none	No border.	border-style: none;
hidden	Same as “none”.except in border conflict resolution for table elements	border-style: hidden;
dotted	A dotted border	border-style: dotted;
dashed	A dashed border	border-style: dashed;
solid	A solid border	border-style: solid;
double	A double border	border-style: double;
groove	A 3D grooved border.	border-style: groove;
ridge	A 3D ridged border.	border-style: ridge;
inset	Specifies a 3D inset border.	border-style: inset;
outset	Specifies a 3D outset border.	border-style: outset;
initial	Sets this property to its default value.	border-style: initial;
inherit	Inherits 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

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

border-style with three values

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

border-style with two values

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

border-style with three values

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

<!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

<!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.