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 =)


5 thoughts on “HTML – Some Useful Divider Lines”

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


    1. Don’t work because here calls a class that you may not have. Check the “aligncenter” class.
      You have to add this style to your css file:

      .aligncenter {
          display: block;
          margin-left: auto;
          margin-right: auto;

      Good luck


Leave a Reply to ykyuen Cancel reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.