HTML – Some Useful Divider Lines

I just realized that the <hr /> divider line is not longer working in 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 =)


About these ads

4 thoughts on “HTML – Some Useful Divider Lines

  1. Sharon

    This saved my website from a slight misalignment in some browsers. I tried others dividers and space makers, but they did not work, yours did. Thanks



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s