Horizontal rule: css styling

I’ve just realised how adaptable the <hr> (horizonal rule) element can be by using css styling. I’ve never much like the default look and so have often changed it to a simple single line.

This isn’t as simple as it sounds since an <hr> is an element composed of padding, surrounded by borders, surrounded by margin. So a single black line:

requires:

hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
}

Using the margins, you can make it shorter and centred:

hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
   margin: 0 5em;
}

or just indent it one side:

hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
   margin-right: 10em;
}

but the best is playing with colours:

hr {
   padding-top: 5px;
   background-color: red;
   border: none;
   border-top: 5px solid blue;
   border-bottom: 5px solid yellow;
   margin: 1em 20em;
}

hr {
   padding-top: 40px;
   background-color: red;
   border: none;
   border-left: 40px solid blue;
   border-right: 40px solid yellow;
   margin: 1em 120px;
   width: 120px;
}