CSS Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
CSS Topics
css tutorials Introduction
Types Types
Background Properties Background Properties
Text Properties Text Properties
Font Properties Font Properties
Box Properties BOX Properties
Border Properties Border Properties
Margin Properties Margin Properties
Padding Properties Padding Properties
Special Topics Special Topics
Forums Ask Your Doubts
Scraps More about CSS
Feedback Feedback
 




CSS Side Border


Tutorials Css

Topic

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.




A Note
CSS - Cascading Style Sheets can be used along with html tags as explained in this site. This simple CSS will help you to create much elegant and neat html web pages. This does not need any additional softwares or codings. All web browser are capable of handing CSS codes.

Note 2: If required you can using <span> instead of <div> tags. div tag will start and end on new lines. span will not exceed the tag area.
Other Links

web hosting