How to set the width of the bottom border with CSS

The code below shows you how to set the width of the bottom border with CSS.

Note: the border-bottom-width property does not set the width of the top border if it is used by itself. First you must set the border-style property and then you can set the border-bottom-width property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>

<style type="text/css">
p.one
{
border-style: solid;
border-bottom-width: 10px;
}
p.two
{
border-style: solid;
border-bottom-width: thin;
}
p.three
{
border-style: solid;
border-bottom-width: medium;
}
p.four
{
border-style: solid;
border-bottom-width: thick;
}
</style>

</head>
<body>
<p class="one">
This is paragraph one.
</p>
<p class="two">
This is paragraph two.
</p>
<p class="three">
This is paragraph three.
</p>
<p class="four">
This is paragraph four.
</p>
</body>
</html>

The code above creates the paragraphs below.

This is paragraph one.

This is paragraph two.

This is paragraph three.

This is paragraph four.

Use the text editor below to practice what you have learned.

Free Website Templates

Free Web Tools

Recommended Websites