CSS: Crossing the Border - How to Set the Border Width
(Page 3 of 4 )
You can also adjust the width of your borders. It works in much the same way as the style, with the order going: top, right, bottom, left.
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-width: 5px;
text-align: center
}
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;
text-align: center
}
</style>
</head>
<body>
<p class="one">Round One!</p>
<p class="two">Chuck Norris looks at Bruce Lee...</p>
<p class="three">Bruce Lee looks at Chuck Norris</p>
<p class="four">Chuck Norris dies.</p>
<p class="five">Bruce Lee is the winner!</p>
<p align=center><b>Up next...Michael Jackson versus Adult Macaulay Culkin!</b></p>
</body>
</html>
How to Set the Individual Border Widths
The Top:
<html>
<head>
<style type="text/css">
p.example
{
border-style: solid;
border-top-width: 20px
}
p.secondexample
{
border-style: dotted;
border-top-width: thin
}
p.thirdexample
{
border-style: dotted;
border-top-width: 20px
</style>
</head>
<body>
<p class="example">Harry Potter contracted Hogwarts from Hermione</p>
<p class="secondexample">Of course Hermione got them from Ron Weasley</p>
<p class="thirdexample">And Ron Weasley got them from the toilet in Slitherin house.</P>
</body>
</html>
The Bottom
<html>
<head>
<style type="text/css">
p.example
{
border-style: solid;
border-bottom-width: 20px
}
p.secondexample
{
border-style: dotted;
border-bottom-width: thin
}
p.thirdexample
{
border-style: dotted;
border-bottom-width: 20px
</style>
</head>
<body>
<p class="example">Harry Potter contracted Hogwarts from Hermione</p>
<p class="secondexample">Of course Hermione got them from Ron Weasley</p>
<p class="thirdexample">And Ron Weasley got them from the toilet in Slitherin house.</P>
</body>
</html>
The Left
<html>
<head>
<style type="text/css">
p.example
{
border-style: solid;
border-left-width: 20px
}
p.secondexample
{
border-style: dotted;
border-left-width: thin
}
p.thirdexample
{
border-style: dotted;
border-left-width: 20px
</style>
</head>
<body>
<p class="example">Harry Potter contracted Hogwarts from Hermione</p>
<p class="secondexample">Of course Hermione got them from Ron Weasley</p>
<p class="thirdexample">And Ron Weasley got them from the toilet in Slitherin house.</P>
</body>
</html>
The Right
<html>
<head>
<style type="text/css">
p.example
{
border-style: solid;
border-right-width: 20px
}
p.secondexample
{
border-style: dotted;
border-right-width: thin
}
p.thirdexample
{
border-style: dotted;
border-right-width: 20px
</style>
</head>
<body>
<p class="example">Harry Potter contracted Hogwarts from Hermione</p>
<p class="secondexample">Of course Hermione got them from Ron Weasley</p>
<p class="thirdexample">And Ron Weasley got them from the toilet in Slitherin house.</P>
</body>
</html>
Next: How to Set Border Colors >>
More Style Sheets Articles
More By James Payne
/ 5 
