The code below shows you how to set the width of the four borders with CSS.
Note: the border-width property does not set the width of the four borders if it is used by itself. First you must set the border-style property and then you must set the border-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-width: 5px;
}
p.two
{
border-style: solid;
border-width: thick;
}
p.three
{
border-style: solid;
border-width: 5px 10px;
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px;
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium;
}
</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>
<p class="five">
This is paragraph five.
</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.
This is paragraph five.
Use the text editor below to practice what you have learned.
