HTML – Some Useful Divider Lines

I just realized that the <hr /> divider line is not longer working in wordpress.com. Luckily i find a very good post which has several pieces of HTML codes to add the divider in WordPress post.

Solid Line

<div class="aligncenter" style="width:400px;height:0;border-top:2px solid #FF7500;font-size:0;">-</div> 

 
Dotted Line

<div class="aligncenter" style="width:400px;height:0;border-top:2px dotted #880088;font-size:0;">-</div>

 
Dashed Line

<div class="aligncenter" style="width:400px;height:0;border-top:2px dashed #FF00FF;font-size:0;">-</div>

 
Double Solid Line

<div class="aligncenter" style="width:400px;height:0;border-top:2px double #0000A0;font-size:0;">-</div>

 
The following are 3D lines with the same color.
Groove Line

<div class="aligncenter" style="width:400px;height:0;border-top:4px groove #008000;font-size:0;">-</div>

 
Ridge Line

<div class="aligncenter" style="width:400px;height:0;border-top:4px ridge #008000;font-size:0;">-</div> 

 
Inset Line

<div class="aligncenter" style="width:400px;height:0;border-top:4px inset #008000;font-size:0;">-</div>

 
Outset Line

<div class="aligncenter" style="width:400px;height:0;border-top:4px outset #008000;font-size:0;">-</div>

 
You can also make use of the border-bottom to add the 2nd line.

<div class="aligncenter" style="width:400px;height:3px;border-top:2px dotted #FF0000;border-bottom:2px dotted #FF0000;font-size:0;">-</div> 

You can find more details the post by Panos. Click the link of wordpress tips at the bottom of the post.

Done =)

Reference:

• wordpress tips – Divider lines
• W3School – CSS Border

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.