CSS Border
==========

Border Style
------------

The border-style property specifies what kind of border to display.

Note: None of the border properties will have ANY effect unless the border-style property is set!

border-style values:

	none: 	Defines no border.

	dotted: Defines a dotted border.

	dashed: Defines a dashed border.

	solid: 	Defines a solid border.

	double: Defines two borders. The width of the two borders are the same as the border-width value.

	groove: Defines a 3D grooved border. The effect depends on the border-color value.

	ridge: 	Defines a 3D ridged border. The effect depends on the border-color value.

	inset: 	Defines a 3D inset border. The effect depends on the border-color value.

	outset: Defines a 3D outset border. The effect depends on the border-color value.

All CSS Border Properties
-------------------------

Property 		Description
-----------------------------------
border 			Sets all the border properties in one declaration
border-bottom 		Sets all the bottom border properties in one declaration
border-bottom-color 	Sets the color of the bottom border
border-bottom-style 	Sets the style of the bottom border
border-bottom-width 	Sets the width of the bottom border
border-color 		Sets the color of the four borders
border-left 		Sets all the left border properties in one declaration
border-left-color 	Sets the color of the left border
border-left-style 	Sets the style of the left border
border-left-width 	Sets the width of the left border
border-right 		Sets all the right border properties in one declaration
border-right-color 	Sets the color of the right border
border-right-style 	Sets the style of the right border
border-right-width 	Sets the width of the right border
border-style 		Sets the style of the four borders
border-top 		Sets all the top border properties in one declaration
border-top-color 	Sets the color of the top border
border-top-style 	Sets the style of the top border
border-top-width 	Sets the width of the top border
border-width 		Sets the width of the four borders

Border Width
------------

The border-width property is used to set the width of the border.

The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

p.one
{
 border-style:solid;
 border-width:5px;
}
p.two
{
 border-style:solid;
 border-width:medium;
}

Border Color
------------

The border-color property is used to set the color of the border. The color can be set by:

    name - specify a color name, like "red"
    RGB  - specify a RGB value, like "rgb(255,0,0)"
    Hex  - specify a hex value, like "#ff0000"

You can also set the border color to "transparent".

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.


p.one
{
 border-style:solid;
 border-color:red;
}
p.two
{
 border-style:solid;
 border-color:#98bf21;
} 

Border - Individual sides
-------------------------

The border-style property can have from one to four values.

    border-style:dotted solid double dashed;
        	 top border is dotted
        	 right border is solid
        	 bottom border is double
        	 left border is dashed

    border-style:dotted solid double;
                 top border is dotted
                 right and left borders are solid
                 bottom border is double

    border-style:dotted solid;
                 top and bottom borders are dotted
                 right and left borders are solid

    border-style:dotted;
                 
              Note: all four borders are dotted

p.one
{
 border-top-style:dotted;
 border-right-style:solid;
 border-bottom-style:dotted;
 border-left-style:solid;
}

p.two
{border-style:dotted solid;}

Border - Shorthand property
---------------------------

The border property is a shorthand for the following individual border properties:

    border-width
    border-style (required)
    border-color

border:5px solid red;

Example 1
---------

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>

</html>

Example 2
---------

<!DOCTYPE html>
<html>
<head>
<style>
p 
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Example 3
---------

<!DOCTYPE html>
<html>
<head>
<style>
p 
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>

<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Example 4
---------

<!DOCTYPE html>
<html>
<head>
<style>
p 
{
border-style:solid;
border-right-color:#ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>