CSS: Crossing the Border
(Page 1 of 4 )
In our previous tutorials we discussed working with text and fonts in your cascading style sheets. Here, we will discuss working with the various border properties. There are a lot of ways to manipulate them, so let's dive right in.
In HTML borders usually pertain to tables. In CSS however, we can add borders to any element. In this way we can manipulate the style and color of our elements to give them a more aesthetically pleasing look.
Setting the Border Property
To begin with, let's create a border around some text, which will have the same type of border on all sides:
<html>
<head>
<style type="text/css">
p
{
border: thick dotted rgb(150,0,00);
text-align: center
}
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
</style>
</head>
<body>
<p>Welcome To Ed's Over-All Emporium! YEE-HAW!</p>
<p class="solid">WOO-EE!</p>
<p class="double">Come N Git It!</p>
<p class="groove">My other bass is a big-mouth!</p>
<p class="dotted">I Love My Gun Rack</p>
<p class="dashed">Deodorant is for wimps</p>
<p class="inset">I met my wife at a family reunion</p>
<p class="outset">Chuck Norris is a real American</p>
<p class="ridge">My family tree is a Christmas wreath</p>
<p class="hidden">I didn't just plead the fifth...I drank it</p>
</body>
</html>
Go ahead and try it out to see what the different border styles look like.
Next: Setting Different Borders Around An Element >>
More Style Sheets Articles
More By James Payne
/ 5 
