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.
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>
Style Sheets 
/ 5 
HTML5 Boilerplate Introduction
