View video tutorial

CSS Border Width

CSS

This specifies the width of the borders.

CSS border-width property

The border-width property specifies the width of the four borders(top, right, bottom, left).

Border-width can have values ​​such as thin, medium, or thick.

The border-width value can also be in px, pt, cm, em etc.

Example

.p1 {
  border-width: thin;
  border-style: solid;
  border-color: black;
}
.p2 {
  border-width: medium;
  border-style: solid;
  border-color: red;
}
.p3 {
  border-width: thick;
  border-style: solid;
  border-color: blue;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


border-width: 1px 2px 3px 4px;

Here, top:1px. right:2px. bottom:3px. left:4px.

border-width: 1px 2px 3px;

Here, top:1px. right:2px. bottom:3px. left:2px.

border-width: 1px 2px;

Here, top:1px. right:2px. bottom:1px. left:2px.

border-width: 1px;

Here, top:1px. right:1px. bottom:1px. left:1px.

Example

.p1 {
  border-width: 1px 2px 3px 4px;
  border-style: solid;
  border-color: black;
}
.p2 {
  border-width: 1px 2px 3px;
  border-style: solid;
  border-color: red;
}
.p3 {
  border-width: 1px 2px;
  border-style: solid;
  border-color: blue;
}
.p4 {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}
Try it Now »

Click on the "Try it Now" button to see how it works.