CSS Border Width

In this article, you will learn-

1 CSS Borders
2 CSS Border Width
3 The border-width Property
4 Specific Side Widths
5 The border-width Property

CSS Borders

The CSS border properties allow you to determine the style, width, and color of an element’s border.

The CSS border is a shorthand property used to set the border on an element.

The border-width property determines the width of the four borders.

The width can be set as a particular size (in px, pt, cm, em, and so forth) or by using one of the three pre-defined values: thin, medium, or thick:

Example
Demonstration of the different border widths:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

The border-width Property

This property specifies the width of the four borders:

Some text.

Note: The “border-width” property does not work if it is used alone. Always specify the “border-style” property to set the borders first.

Specific Side Widths

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>

</body>
</html>

The border-width Property

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

Some text.

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.