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:
- Center: text-align:center; margin: 0 auto;
- Right: text-align:right; margin: 0 0 0 auto;
- Left: text-align:left; margin: 0 auto 0 0;
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); }