 <p>In fact, your question can be merely resolved through an underrated characteristic of <code>box-shadow</code>:</p> <blockquote> <p>The ‘box-shadow’ property attaches <strong>one or more</strong> drop-shadows to the box. The property takes a comma-separated list of shadows, <strong>ordered front to back</strong>. Each shadow is given as a &lt;shadow>, represented by 2-4 length values, an optional color, and an optional ‘inset’ keyword.<br> &lt;shadow&gt; = inset? &amp;&amp; {2,4} &amp;&amp; ?</p> </blockquote> <p>Your current <code>box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16)</code> is <strong>only one</strong> of the possible &lt;shadow&gt;s as stated above.</p> <p>You can simply prepend it with a first (so front) &lt;shadow&gt; with the desired characteristics, like:<br> <code>box-shadow: #fff 0 -5px, 0 2px 10px 0 rgba(0, 0, 0, 0.16)</code>, where the 1st instance has:</p> <ul> <li><code>#fff</code> has to be the same color as the master <code>&lt;ul&gt;</code> color</li> <li><code>0</code> makes no horizontal (right) shadow</li> <li><code>-5px</code>makes a vertical (natively down, but here up since the minus sign) shadow, which is just what you need to hide the top shadow generated by your previous unique (and now 2nd) instance </li> </ul> <p>Then you have to manage with your red <code>&lt;ul&gt;</code> border-bottom, because now it is hidden also: it's up to you to imagine which method to use for that.</p>