title: Linear fade out div, content and border (solid at top to transparent at bottom)
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/12664132/is-it-possible-to-graduate-the-opacity-of-an-html-element">Is it possible to graduate the opacity of an HTML element?</a>  </p>
  </blockquote>
  
  
  
  <p>I am trying to get a div (and its border and contents) to fade into transparency (ie solid at the top and transparent at the bottom) using css.</p>
  
  <p>Is there a way to do this?</p>
  
  <p>Ive been able to fade the background out with the following:</p>
  
  <pre><code>.fade-to-nothing
  {
      background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
      background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
      background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>but haven't been able to find a way to do it to the content/border of the div as well. perhaps with some kind of nesting or an overlay?</p>
  
  <p><strong>EDIT</strong>
  heres what I was trying to do:</p>
  
  <p><img src="https://i.stack.imgur.com/3coVS.png" alt="enter image description here"></p>