Tips and Tricks

Cross-Browser <hr> (Horizonal Rule - Line) Styling using CSS Code

Build Online Forms for your Web Site

Arclab® Web Form Builder the HTML form creation software for Windows PC to create email contact forms and php forms with ease. Build HTML forms on your PC and upload the forms to your own web site.

Learn more

Arclab Web Form Builder uses CSS code to style HTML elements like <hr>.

 

Please open the "Form Properties" -> "Style and Layout" -> "Horizontal Rule (Line) Style".
The default is a 1pixel black line: height:1px; border:none; color:#000; background-color:#000;
Important: Only enter the style definition in the program!

 

Cross-Browser Color:

color:#000000; background-color:#000000;

Its important to define the color AND the background color to make it cross-browser compatible!

 

Width and Height:

 e.g. width: 80%; height:1px;

The width is 100% if no width is specified!

 

Cross-Browser Horizontal Alignment:

Its important to define the text-align (even if hr is a block element) AND the margin to make the alignment cross-browser compatible!

 

Border:

border: none;

We want no border around the horizontal rule!

 

 

Samples: Cross Browser CSS Code for <hr>

 


Style definition:
height:1px; border:none; color:#000; background-color:#000;

 

 


Style definition:
height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:center; margin: 0 auto;

 

 


Style definition:
height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:right; margin: 0 0 0 auto;

 

 


Style definition:
height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:left; margin: 0 auto 0 0;

 

 


Style definition:
height:3px; border:none; color:rgb(60,90,180); background-color:rgb(60,90,180);