title: How to add box-shadow to bootstrap carousel image?
body: <p>I want to have a inset <code>box-shadow</code> over my images in a bootstrap carousel but whatever I do it doesn't work. I want the shadow just around the borders of the image.</p>
  
  <p><strong>Here is my code:</strong></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>.carousel-item {
      width: 100%;
  }
  .carousel-item&gt;a&gt;img {
      width: 400px;
      height: 600px;
  }
  .carousel-item&gt;a&gt;img::after {
      box-shadow: 0px 0px 60px 40px black inset;
      bottom: 0;
      content: "";
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;div id="content"&gt; 
  
  &lt;div id="demo" class="carousel slide" data-ride="carousel"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item"&gt;
              &lt;a href="/2/"&gt;
                  &lt;img src="https://www.w3schools.com/bootstrap4/chicago.jpg"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          
          &lt;div class="carousel-item"&gt;
              &lt;a href="/4/"&gt;
                  &lt;img src="https://www.w3schools.com/bootstrap4/chicago.jpg"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          
          &lt;div class="carousel-item"&gt;
              &lt;a href="/3/"&gt;
                  &lt;img src="https://www.w3schools.com/bootstrap4/chicago.jpg"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>