CSS Border Width

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

You can give a specific size (in px, pt, cm, em, and so on) or use one of three preset values: thin, medium, or thick.

Example

Each paragraph uses a different border width.

An HTML page that demonstrates different border-width values.

In an internal `<style>` block, make four paragraph classes: solid 5px, solid medium, dotted 2px, and dotted thick. Each must also set border-style. Add a paragraph for each, labeling the width used.

> Output: complete HTML page

Prompt

An HTML page that demonstrates different border-width values. In an internal <style> block, make four paragraph classes: solid 5px, solid medium, dotted 2px, and dotted thick. Each must also set border-style. Add a paragraph for each, labeling the width used.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
}
</style>
</head>
<body>

<p class="one">5px border-width</p>
<p class="two">medium border-width</p>
<p class="three">2px border-width</p>
<p class="four">thick border-width</p>

</body>
</html>

Specific Side Widths

The border-width property can take from one to four values, for the top, right, bottom, and left borders.

Example

Two values set top/bottom and sides, while four values set each side on its own.

An HTML page that shows how border-width can take one to four values for the four sides.

In an internal `<style>` block, make three solid-bordered paragraph classes: one with "5px 20px", one with "20px 5px", and one with "25px 10px 4px 35px". Add a paragraph for each.

> Output: complete HTML page

Prompt

An HTML page that shows how border-width can take one to four values for the four sides. In an internal <style> block, make three solid-bordered paragraph classes: one with "5px 20px", one with "20px 5px", and one with "25px 10px 4px 35px". Add a paragraph for each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>

<p class="one">5px top and bottom, 20px on the sides.</p>
<p class="two">20px top and bottom, 5px on the sides.</p>
<p class="three">25px top, 10px right, 4px bottom, 35px left.</p>

</body>
</html>