title: HR line to border line
body: <p>I had a <code>&lt;hr&gt;</code> line styled with a linear-gradient that I can no longer use. Instead I have to solve it via a bottom border that should be styled in the same way. I know borders can be styled using a linear-gradient as well, however, I can't get it to work. </p>
  
  <p>I had the following code applied to the <code>&lt;hr&gt;</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>hr.mydivider {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could anyone help me in translating this to a bottom border? </p>
  
  <p>I would much appreciate any help!!</p>
  
  <p>Many thanks
  David </p>