CSS: Crossing the Border - Setting Different Borders Around An Element
(Page 2 of 4 )
If you wish to set different borders around an object, that is possible also. Note that the order goes like this: top, right, bottom, left.
<html>
<head>
<style type="text/css">
p.sample
{
border-style: dashed inset dotted hidden;
text-align: left;
}
p.secondsample {border-style: solid dashed solid dashed; text-align: center}
p.thirdsample {border-style: dashed groove solid groove; text-align: right}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p class="sample">Kiss my grits!</p>
<p class="secondsample">Stifle!</p>
<p class="thirdsample">Dingbat!</p>
</body>
</html>
For example, the first border is set so that the top border is dashed, the right border is inset, the bottom border is dotted, and left border is hidden.
Setting One Part of a Border
The following samples will each display only one part of a border:
The Top
<html>
<head>
<style type="text/css">
p
{
border-top: medium solid #ff0000
}
</style>
</head>
<body>
<p>I will not eat brown grits and spam.</p>
<p>I will not eat them on a train. </p>
<p> I will not eat them on a plane</p>
<p> I will not eat them with guacamole</p>
<p>But I will eat them for Angelina Jolie</p>
<p>What? You think <i>you</i> can rhyme better?!?</p>
</body>
</html>
The Bottom
<html>
<head>
<style type="text/css">
p
{
border-bottom: medium dashed #ff0000
}
</style>
</head>
<body>
<p>I will not eat brown grits and spam.</p>
<p>I will not eat them on a train. </p>
<p> I will not eat them on a plane</p>
<p> I will not eat them with guacamole</p>
<p>But I will eat them for Angelina Jolie</p>
<p>What? You think <i>you</i> can rhyme better?!?</p>
</body>
</html>
The Left
<html>
<head>
<style type="text/css">
p
{
border-left: medium solid green
}
</style>
</head>
<body>
<p>I will not eat brown grits and spam.</p>
<p>I will not eat them on a train. </p>
<p> I will not eat them on a plane</p>
<p> I will not eat them with guacamole</p>
<p>But I will eat them for Angelina Jolie</p>
<p>What? You think <i>you</i> can rhyme better?!?</p>
</body>
</html>
The Right
<html>
<head>
<style type="text/css">
p
{
border-right: medium solid blue
}
</style>
</head>
<body>
<p>I will not eat brown grits and spam.</p>
<p>I will not eat them on a train. </p>
<p> I will not eat them on a plane</p>
<p> I will not eat them with guacamole</p>
<p>But I will eat them for Angelina Jolie</p>
<p>What? You think <i>you</i> can rhyme better?!?</p>
</body>
</html>
Next: How to Set the Border Width >>
More Style Sheets Articles
More By James Payne
/ 5 
