CSS border-width

CSS border-width property sets the width of all the four borders: top, right, bottom, and left.

border-width property can take different types of values. The following table provides the values and their description with examples.

Allowed Value	Description	Example
thin	A thin stroked border.	border-width: thin;
medium	A medium stroked border.	border-width: medium;
thick	A thick stroked border.	border-width: thick;
initial	Default border-width.	border-width: initial;
inherit	Inherit border-width value from parent element.	border-width: inherit;
length	Border width in specified length units.	border-width: 5px;border-width: 2em;

Examples

border-width thin

In the following example, we set a thin width border for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
            border-width: thin;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-width medium

In the following example, we set a medium width border for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
            border-width: medium;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-width thick

In the following example, we set a thick width border for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
            border-width: thick;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-width 1px

In the following example, we set 1px width border for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-width 04em

In the following example, we set a 0.4em width border for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
            border-width: 0.4em;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-width inherit

In the following example, we set border-width to inherit for <h1> element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            padding: 10px;
            border: solid;
            border-width: 20px;
        }
        h1 {
            border: solid;
            border-width: inherit;
        }
    </style>
</head>
<body>
    <div>
        <h1>Hello World</h1>
    </div>
</body>
</html>

Conclusion

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