title: CSS Border radius and filter grayscale not working together
body: <p>I have some css in place that uses both a border-radius and a grayscale filter. I want the border radius to be in place all the time but the grayscale to disappear on hover.</p>
  <p>The border radius works fine until I add in the grayscale, then it stops working and just shows the images as a square. On hover (when the filter is removed) the border-radius kicks in again. Does anyone know what I am missing?</p>
  <p>I have searched but can't find an answer.</p>
  <pre><code>.esg-entry-media {
      width: 250px;
      height: 250px;
      margin: 0 auto;
      -webkit-border-radius: 50% !important;
      border-radius: 50% !important;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
  }
  
  .esg-entry-media:hover {
      border: solid 10px #fff !important;
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
  }
  </code></pre>
  <p>I have included an image of the hover and non-hover states for reference.</p>
  <p><a href="https://i.stack.imgur.com/isr4H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/isr4H.png" alt="enter image description here" /></a></p>