CSS Border Style Property with Examples

Border Style

The border-style property in CSS specifies the style of the border around an HTML element. You can apply it to all sides at once or individually to the top, right, bottom, or left.

Syntax:

selector {
  border-style: value;
}

Common border-style Values

Value	Description
solid	A single solid line
dotted	A series of small dots
dashed	A series of short dashes
double	Two solid lines with a gap in between
groove	A 3D grooved border
ridge	A 3D ridged border
inset	Makes the element look embedded
outset	Makes the element look raised
none	No border
hidden	Similar to none, but used in tables

Apply Styles to Individual Sides

Use these properties for individual sides:

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

Example: Multi-style Borders

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: dashed;
            border-left-style: double;
            border-width: 5px;
            padding: 2em;
        }
    </style>
</head>
<body>
    <h2>border-style (single-side)</h2>
    <p>Welcome to Quipoin</p>
</body>
</html>

Output: