CSS Border Width

CSS Border Width

border-width The property specifies the width of all four borders.

You can set the width to a specific size (in px, pt, cm, em), or use one of the following three predefined values: thin, medium, or thick:

Example

Demonstrate different border widths:

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;
}

Result:

5px border-width

medium border-width

2px border-width

thick border-width

Try It Yourself

Specific edge width

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

Example

p.one {
  border-style: solid;
  border-width: 5px 20px; /* Top and bottom border 5px, other borders 20px */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* Top and bottom border 20px, other borders 5px */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* Top border 25px, right border 10px, bottom border 4px, left border 35px */
}

Try It Yourself