title: Why is my background gradient extending past the border on Mac and ios?
body: <p>I have a carousel of rounded images with a gradient over them, so that white text can be easily read when placed over the image.  Occasionally, the gradient doesn't follow the border-radius and extends in it's default square shape past the border.  I actually haven't been able to recreate this on my own Mac, but one of my designers has said that this happens quite often to her on her Mac and iPhone:</p>
  
  <p><a href="https://i.stack.imgur.com/sYsKn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sYsKn.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the CSS I'm using for the image and gradient:</p>
  
  <pre><code>.carousel-image-container {
          position: relative;
          padding: 0px;
          border-radius: 50%;
          border: 6px solid white;
          cursor: pointer;
      }
  
      .carousel-image-container img {
          display: block;
          width: 100%;
          max-width: 100%;
          border: 0;
          margin: 0;
          padding: 0;
          border-radius: 50%;
      }
  
      .carousel-image-container::after {
          display: block;
          position: relative;
          background-image: linear-gradient(to bottom, rgba(69, 72, 77, 0.07) 5%, rgba(69, 72, 77, 0.1) 8%, rgba(0, 0, 0, 1) 100%);
          margin-top: -300px;
          height: 300px;
          width: 100%;
          content: '';
      }
  </code></pre>
  
  <p>Has anybody run into this before/can anybody help me make it not happen anymore?</p>