HR CSS3 Tapering

hr.less

/* See http://cl.ly/8KmQ for an example */

hr {
  margin: 15px 0;
  position: relative;
  border: 1px solid transparent;
  .box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
  
  &:before, &:after {
    content: "";
    position: absolute;
    top: -5px;
    display: block;
    width: 170px;
    height: 10px;
  }
  
  &:before { 
    .hbg-gradient(rgba(246, 246, 246, 1), rgba(246, 246, 246, 0));
    left: 0; 
  }
  
  &:after { 
    .hbg-gradient(rgba(246, 246, 246, 0), rgba(246, 246, 246, 1));
    right: 0; 
  }
}