Cross-Browser <hr>

(Horizonal Rule - Line) Styling using CSS Code

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!

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.
The forms can be integrated into normal HTML or php websites, or in Wordpress, Joomla, Drupal or Typo3.

 

Learn more    Download Test Version

Web Form Builder

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); }
Disclaimer: The information on this page is provided "as is" without warranty of any kind. Further, Arclab Software does not warrant, guarantee, or make any representations regarding the use, or the results of use, in terms of correctness, accuracy, reliability, currentness, or otherwise. See: License Agreement