Property: Side Borders
Each side of the border can be handled separately using the these tags.
Usage:
border-top: <border-top-width> || <border-style> || <border-color> ;
border-left: <border-left-width> || <border-style> || <border-color> ;
border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;
border-right: <border-right-width> || <border-style> || <border-color> ;
Definition:
Each side of the border can be handled separately using this tags.
Border sides takes the following values.
a)border-top : 5px dotted red - The top border is set using the tag border-top.
The values or in the order width, style and color of top border.
b)border-left : 5pt dashed green - The left border is set using the tag border-left.
The values or in the order width, style and color of top border.
c)border-bottom : 2% groove grey - The bottom border is set using the tag border-bottom.
The values or in the order width, style and color of top border.
d)border-right: 5px solid blue - The right border is set using the tag border-right.
The values or in the order width, style and color of top border.
Example 1:
<div style=" border-top : 2px dotted red ;">
testing border properties </div>
Result:
testing border properties
Example 2:
<div style=" border-left : 2pt dashed green; ">
testing border properties </div>
Result:
testing border properties
Example 3:
<div style=" border-bottom: 5px ridge brown;">
testing border properties </div>
Result:
testing border properties
Example 4:
<div style=" border-right: 5px groove #733366;">
testing border properties </div>
Result:
testing border properties
Combing All:
Example 5:
<div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
testing border properties </div>
Result:
testing border properties
NOTE: In the example we have used div tag.
But you can use any standard html tags to set the style.
| 
