CSS Borders
Handling borders... !
Explanation
Property :
BordersInstead of setting each side of borders separately, the whole thing can be done using the single tag
Usage:
border: <border-width> || <border-style> || <border-color> ;
Definition:
This will set the border to any object.
a)border : 5px dotted green - The border is set using the tag border. The values or in the order width, style and color of border.
This set the border on all the four sides.
a)border : 5px dotted green - The border is set using the tag border. The values or in the order width, style and color of border.
This set the border on all the four sides.
Example 1:
<div style=" border : 2px dotted red ;"> 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.
Common Border on Three Sides and Different border in one side:
In some cases we will have common border for two are three sides and different border in only one side. This can be easily handled as follows
Example 2:
<div style="
border : 2px dotted red ;
border-top: 3px dashed green; ">
testing border properties </div>
border : 2px dotted red ;
border-top: 3px dashed green; ">
testing border properties </div>
Result:
testing border properties
Definition:
Initially we set the common border for all sides using border attribute and then we set/change the top border using "border-top".
