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

ADVERTISEMENT

border-width: thin;

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

index.html

border-width: medium;

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

index.html

border-width: thick;

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

index.html

border-width: 1px;

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

index.html

border-width: 0.4em;

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

index.html

border-width: inherit;

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

index.html

Conclusion

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