1. CSS Border

2. CSS Borders
The Border properties allow you to specify the style, color, and width of an element's border. In HTML we used tables to create borders around a text, but with the Border properties we can create borders with nice effects, and it can be applied to any element.

3. Border Property
The border property is a shorthand property for setting all of the properties for the four borders in one declaration.
Note: This property can not set a different value for each side of the border, like "margin" and "padding".
Inherited: No

4. Example p { border: thin dotted #00FF00 }
span {  border: solid #0000FF } 

5. Possible Values Value Description NN IE
border-width border-style border-color
Sets the properties for the four borders
4.0

6. Browser Notes Notes in IE 4.0:
This property does not work on checkboxes and radiobuttons
This property on list items moves the list item marker
Note in IE 4.0+:
This property does not work with inline elements
Note in IE 5.5 Beta 1:
This property works with inline elements
Notes in Netscape 4.0:
Border properties turn inline elements into block elements
Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items
Default value for "border-style" is "solid", not "none" as it is written in the specification
Default value for "border-width" is "0", not "medium" as it is written in the specification

7. Border-Color Property
The border-color property sets the color of the four borders. This property can take one to four colors.
Note: Always declare the border-style property before the border-color property. An element must have borders before you change the color of them.
Inherited: No

8. Example
table {border-color: red} all four borders will be red table {border-color: red green} top and bottom border will be red, left an right border will be green 
table {border-color: red green blue} top border will be red, left and right border will be green, bottom border will be blue
table {border-color: red green blue yellow} top border will be red, right border will be green, bottom border  will be blue, left border will be yellow

9. Possible Values Value Description NN IE color
The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000). 
6.0
4.0
transparent
The border is transparent

10. Browser Notes Note in IE 4.0-5.0:
This property does not work with inline elements
Note in IE 5.5 Beta 1:
This property works with inline elements
Note in Netscape 4.0+:
This property is not recognized. Use the "border" property to set the properties for the borders

11. Border-Style Property
The border-style property sets the style of the four borders, can have from one to four styles.
Inherited: No

12. Example
table {border-style: dotted} all four borders will be dotted table {border-style: dotted dashed} top and bottom border will be dotted, left an right border will be dashed 
table {border-style: dotted dashed solid} top border will be dotted, left and right border will be dashed, bottom border will be solid
table {border-style: dotted dashed solid double} top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double

13. Value
Description NN IE
none
Defines no border
6.0
4.0
hidden
The same as "none"
dotted
Defines a dotted border.
5.5
dashed
Defines a dashed border.
solid
Defines a solid border
double
Defines two borders.
groove
Defines a 3D grooved border.
ridge
Defines a 3D ridged border.
inset
Defines a 3D inset border.
outset
Defines a 3D outset border.

14. Browser Notes Note in IE 4.0-5.0:
This property does not work with inline elements
Note in IE 5.5 Beta 1:
This property works with inline elements
Note in Netscape 4.0+:
This property is not recognized. Use the "border" property to set the borders

15. Border-Width Property
The border-width property is a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.
Inherited: No

16. Example table {border-width: thin} all four borders will be thin
table {border-width: thin medium} top and bottom border will be thin, left and right border will be medium
table {border-width: thin medium thick} top border will be thin, left and right border will be medium, bottom border will be thick
table {border-width: thin medium thick none} top border will be thin, right border will be medium, bottom border will be thick, left side will have no border

17. Possible Values Value Description NN IE thin Defines a thin border.
4.0
medium
Defines a medium border.
thick
Defines a thick border.
length
Allows you to define the thickness of the borders. 

18. Browser Notes Note in IE 4.0+:
This property is not recognized if it is used alone. Use the "border-style" property to set the borders first
Note in IE :
This property does not work with inline elements
Note in IE 5.5 Beta 1:
This property works with inline elements
Notes in Netscape 4.0:
Border properties turn inline elements into block elements
Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items
Default value for this property is "0", not "medium" as it is written in the specification