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 ValueDescriptionExample
thinA thin stroked border.border-width: thin;
mediumA medium stroked border.border-width: medium;
thickA thick stroked border.border-width: thick;
initialDefault border-width.border-width: initial;
inheritInherit border-width value from parent element.border-width: inherit;
lengthBorder 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

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

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

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

</>
Copy
<!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: 0.4em;

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

index.html

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

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