Border Style

In CSS, the border-style property is used to specify the style of the border around an element.
The border-style property can accept one or multiple values, each of which corresponds to a border side.

Syntax:

selector {
border-style: value;
}

Values for the border-style property include

Solid: Creates a solid line border.

border-style: solid;

Dotted: Creates a series of small dots as the border.

border-style: dotted;

Dashed: Creates a series of short dashes as the border.

border-style: dashed;

Double: Creates a double-line border.

border-style: double;

Groove: Creates a three-dimensional, grooved border.

border-style: groove;

Ridge: Creates a three-dimensional, ridged border.

border-style: ridge;

Inset: Creates a three-dimensional, inset border.

border-style: inset;

CSS properties to control the style of an element:

border-top-style
border-right-style
border-bottom-style
border-left-style

Example:

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