
The CSS border-width property settles the width of an element’s four borders.
Demo:
The CSS border-width property can have from one to four values.
Example1:
Set the width of the top and bottom borders to 8px, and the width of the left and right borders to 3px:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-style: solid;
border-width: 8px 3px;
}
</style>
</head>
<body>
<h4>A heading with a 8px top and bottom border and 3px left and right border.</h4>
</body>
</html>
Output:
A heading with a 8px top and bottom border and 3px left and right border.
Syntax:
border-width: medium|thin|thick|length;
medium (default) – defines a medium border.
thin – defines a thin border.
thick – defines a thick border.
length – allows you to specify the thickness of the border (CSS Units).
Example2:
Set the width of the borders to thick:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-style: solid;
border-width: thick;
}
p {
border-style: solid;
border-width: thick;
}
</style>
</head>
<body>
<h4>A heading with a thick border.</h4>
<p>A paragraph with a thick border.</p>
</body>
</html>
Output:
A heading with a thick border.
A paragraph with a thick border.
Enjoy coding!
Read also: