---

<hr/>

is more or less, mostly more, a CSS 'box' and a box is as set of borders incuding inter-space

this is a traditional whose width i've set to 220 pixel with <hr style="width:220px;" >

---

if you adjust the width and more inportanly, the height, add color to 'background' it's easy to see it's realy a css 'box'

---

<hr style="width:220px; height:20px; border-color: black; border-width:5px; background-color:purple; box-shadow:4px 4px 4px gray;" >

*note, i added 'shadow' to the border which acounts for the 'beveled' look.

the 'new' HTML5 <hr> is no longer a 'horizontal rule', but an inline 'seperator'..

---

{ *notes: (1): i've been using border-shadow:4px,4px,4px gray;, but it seems either i was 'remembering' it wrong or , again w3c changed their 'specs'. Anyways, the only thing i can find now is box-shadow: using simular attribute (value) syntax, BUT NO ',' (commas) ' :4px 4px 4px gray; }
(2): also, w3c validator now says that margin-before and after are not valid.. Fucking assholes!
(example: <style="display:block; width:220px; /*margin-before:0.5em; margin-after:0.5em; margin-start:auto; margin-end:auto; border-style:inset; border-width:1px;" >

 

---

<hr class="appleheart"> the 'hr' above, coded below

hr.appleheart:before {
  content:"\2767";
  position:absolute;
  width:100%;
  top:-0.25em;
  text-align:center;
  color:rgba(0,0,0,0.21);
  text-shadow:0px 0px .05em rgba(255,255,255,.12);
  height:2em;color:#ccc;
  font-size:2.75em;
}

hr.appleheart {
  position:relative;
  border-style:none;
  border-top:.1em solid #ddd;
  border-collapse:collapse;
  margin:2em 0;
  padding:0em; 
  display:block;
  height: 2em;
  line-height:1em; 
  background-image:-moz-radial-gradient(50% -0% 90deg,ellipse cover, rgba(255,255,255,1), rgba(255,255,255,0.7), rgba(255,255,255,0.0), rgba(255,255,255,0));
  background-image:-webkit-gradient(radial, center -20, 0, center -1200, 1270, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)), color-stop(0.55, rgba(255,255,255,0.0)), color-stop(0.25, rgba(255,255,255,1)));
}