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.
CSS: Crossing the Border - How to Set Border Colors (Page 4 of 4 )
What better way to pretty up those elements by giving them a colored border? Here is how you do it:
<html>
<head>
<style type="text/css">
p.onecolor
{
border-style: solid;
border-color: #0000ff
}
p.twocolor
{
border-style: solid;
border-color: black yellow
}
p.threecolor
{
border-style: dashed;
border-color: black yellow orange
}
p.fourcolor
{
border-style: solid;
border-color: black orange red yellow
}
</style>
</head>
<body>
<p class="onecolor">I'm Blue</p>
<p class="twocolor">I look like a bumble bee</p>
<p class="threecolor">Halloween all over your face</p>
<p class="fourcolor">Your mother is fat...deal with it</p>
</body>
</html>
As with other border attributes, you can also set the different sides of a border's colors individually. Here is how:
The Top
<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-top-color: orange
}
</style>
</head>
<body>
<p>Trick or Treat</p>
</body>
</html>
The Bottom
<html>
<head>
<style type="text/css">
p
{
border-style: dotted;
border-bottom-color: orange
}
</style>
</head>
<body>
<p>Trick or Treat</p>
</body>
</html>
The Left
<html>
<head>
<style type="text/css">
p
{
border-style: dotted;
border-left-color: orange
}
</style>
</head>
<body>
<p>Trick or Treat</p>
</body>
</html>
The Right
<html>
<head>
<style type="text/css">
p
{
border-style: dotted;
border-right-color: orange
}
</style>
</head>
<body>
<p>Trick or Treat</p>
</body>
</html>
Well that's it for this tutorial. Get out their and go nuts on some borders. But be sure not to get arrested by the border patrol (ha cha cha), as I will be writing about margins and padding in CSS in the next exciting episode!
Till then...
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
/ 5 
HTML5 Boilerplate Introduction
