Border Width

The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

HTML file: Displayed by browser:
<style>
p.one {
   border-style: solid;
   border-width: 5px;
}
p.two {
   border-style: solid;
   border-width: thick;
}
p.three {
   border-style: solid;
   border-width: medium;
}
p.four {
   border-style: solid;
   border-width: thin;
}
p.five {
   border-style: solid;
   border-width: 1px;
}
</style>
<body>
<p class="one">Some text in solid 5px.</p>
<p class="two">Some text in solid thick.</p>
<p class="three">Some text in solid medium.</p>
<p class="four">Some text in solid thin.</p>
<p class="five">Some text in solid 1px.</p>
</body>

Some text in solid 5px.

Some text in solid thick.

Some text in solid medium.

Some text in solid thin.

Some text in solid 1px.











Good habit Note: The "border-width" property does not work if it is used alone. You must use the "border-style" property to set the borders first.

I've added a 3px padding to each bordered paragraph.

Back button Table of Contents Next button