title: HTML/CSS border shadow inside object
body: <p>I'm looking for a way to make list having borders with solid shadows, looking just like a second border without using images for borders as it would be used with changing text, meaning width also changes.</p>
  
  <p>Result I'm aiming for would be:</p>
  
  <p><a href="https://i.stack.imgur.com/4i13r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4i13r.png" alt="Aimed result"></a></p>
  
  <p>But without adding second object with negative z-index and complicating everything with scripts for width change and etc. only result I am getting is</p>
  
  <p><a href="https://i.stack.imgur.com/9sRgL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9sRgL.png" alt="Result with coding"></a></p>
  
  <p>CSS code used would be quite simple</p>
  
  <pre><code>li {
    padding: 5px;
    display: inline-block;
    border: 1px solid #718496;
    -webkit-box-shadow: 1px 1px rgba(68, 150, 210, 0.5);
            box-shadow: 1px 1px rgba(68, 150, 210, 0.5);
    border-radius: 10px;
    height: 18px;
  }
  
  </code></pre>
  
  <p>*box with icon only is just for showcasing effect I'm after, not the only box I need it for.</p>
  
  <p>Is there any possibility to achieve this effect without second object with border under it?</p>