title: How to create a inset box-shadow only on one side?
body: <p>Is it possible to somehow only have inset box-shadow on one side of a div ? Note that I'm talking about an <strong>inset</strong> box-shadow here, not the normal outer box-shadow.</p>
  
  <p>For example, in the following JSFiddle, you'll see that the inset shadow appears on all 4 sides, in varying degrees.</p>
  
  <p>How do I get it to ONLY show at the top ? Or at most ONLY at top and bottom ?</p>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/ahmadka/KFrun/" rel="noreferrer">http://jsfiddle.net/ahmadka/KFrun/</a></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>.box {
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
  }
  
  .text {
    padding: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="text"&gt;
      Lorem ipsum ....
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>