Border Width

The border-width property allows specifying the width of each side of the border (top, right, bottom, left) individually or setting a single value to apply the same width to all sides.
The width of an element's border is controlled by using the width of an element's border

Example:

<!DOCTYPE html>
<html>

<body>
    <h2>border-width with different values</h2>
    <p style="border-style: double; border-width: thin;">Thin width.</p>
    <p style="border-style: dashed; border-width: medium;">Medium width.</p>
    <p style="border-style: solid; border-width: thick;">Thick width.</p>
    <p style="border-style: dotted; border-width: 5px">Specific length width border.</p>
    <p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width border.</p>
</body>

</html>

Output:

Border width-single side:

The property border-width can be set for each single side.

border-top-width
border-right-width
border-bottom-width
border-left-width

Example:

<html>

<head>
    <style>
        p {
            border-style: solid;
            padding: 2em;
            border-top-width: thin;
            border-right-width: thick;
            border-bottom-width: medium;
            border-left-width: 10px;
        }
    </style>
</head>

<body>
    <h2>border-width (single-side)</h2>
    <p>Welcome to Quipoin.</p>
</body>
<html>

Output: