hr - The Horizontal rule
A basic horizontal rule can be done with a simple
<hr> element. However if you want to style it a little there are a few things to look for.
<hr> default colour is set by the border. To simplify things and to get it to work consistently we’re going to start by removing that
border-width: 0 then we need to set our custom colour using
background: #000 and to get it working in Outlook we use
color: #000. Because we’ve removed the border we now need to give it some height to see that colour showing so here I’ve added
That’s it, pretty simple but there are a few other things you can add if you like.
The default is
width:100% but you can use what suits your style. Consider if you use a fixed width it may be good to also add a
max-width so this stays responsive
You can adjust the space around with a margin, either in long hand or short hand format. However MSO Outlooks don’t support it when applied directly to the
<hr> so to get it working there we need to add the margin to a wrapping
By default it will be aligned center, but with an
align="" attribute you can set it to align left or right.
You can also use this as a spacer if you set the colours to match the background.
You can do a vertical rule, by simply setting the height larger than the width.