Tips and Tricks

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

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 widht is 100% if no width is specified!

 

Cross-Browser Horizontal Aligment:

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;

Inline CSS:
<hr style="height:1px; border:none; color:#000; background-color:#000;">

CSS:
hr {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;

Inline CSS:
<hr style="height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:center; margin: 0 auto;">

CSS:
hr {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;

Inline CSS:
<hr style="height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:right; margin: 0 0 0 auto;">

CSS:
hr {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;

Inline CSS:
<hr style="height:1px; border:none; color:#000; background-color:#000; width:60%; text-align:left; margin: 0 auto 0 0;">

CSS:
hr {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);

Inline CSS:
<hr style="height:3px; border:none; color:rgb(60,90,180); background-color:rgb(60,90,180);">

CSS:
hr { height:3px; border:none; color:rgb(60,90,180); background-color:rgb(60,90,180); }