CSS BORDER WIDTH


The border-width property specifies the width of the four borders. The border-width property does not work if it is used alone. It is necessary to specify the "border-style" property to set the borders first.

The width can be set using one of the three pre-defined values: thin, medium, or thick or as a specific size (in px, pt, cm, etc).


For example:


<!DOCTYPE html>
<html>
<head>
<style>
.first {
  border-style: solid;
  border-width: 7px;
}
.second {
  border-style: dashed;
  border-width: medium;
}
.third {
  border-style: dotted;
  border-width: 3px;
}
.fourth {
  border-style: groove;
  border-width: thick;
}
.fifth {
  border-style: double;
  border-width: 15px;
}
.sixth {
  border-style: double;
  border-width: thin;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>Testing width of the four borders:</p>
<p class="first">Applying first class border width.</p>
<p class="second">Applying second class border width.</p>
<p class="third"> Applying third class border width.</p>
<p class="fourth"> Applying fourth class border width.</p>
<p class="fifth"> Applying fifth class border width.</p>
<p class="sixth"> Applying sixth class border width.</p>

</body>
</html>
Live Demo!


Output:

The border-width Property

Testing width of the four borders:

Applying first class border width.

Applying second class border width.

Applying third class border width.

Applying fourth class border width.

Applying fifth class border width.

Applying sixth class border width.



It is possible to have different values for different sides of the border, from one to four values (for the top border, right border, bottom border, and the left border)


For example:


<!DOCTYPE html>
<html>
<head>
<style>
.one {
  border-style: solid;
  border-width: 5px 20px;
  /* 5px top and bottom, 20px on the sides */
}
.two {
  border-style: solid;
  border-width: 10px 5px;
  /* 10px top and bottom, 5px on the sides */
}
.three {
  border-style: solid;
  border-width: 15px 10px 4px 25px;
  /* 15px top, 10px right, 4px bottom and 25px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>Assigning separate widths for separate sides of the border</p>
<p class="one">First Width.</p>
<p class="two">Second Width.</p>
<p class="three">Third Width.</p>

</body>
</html>
Live Demo!


Output:

The border-width Property

Assigning separate widths for separate sides of the border

First Width.

Second Width.

Third Width.