CSS Side Border

How to draw borders on only left and right side of my text?
To draw borders on user specified sides.
How to draw different type of border on different sides?

Explanation

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.
PreviousNext

CSS Topics