Rounded corners for an iframe not working in Safari

user_194255 0
Viewed 3317

So, I know that border-radius doesn't really work on an iframe itself, but what you can do to get a similar effect is to wrap that iframe in a div, and set the border-radius on the div itself, like so:

<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

.modal-iframe-wrapper {
  overflow: hidden;
  border-radius: 8px;
}

This, however, doesn't seem to work in Safari, and I couldn't find any other recent workarounds (the few questions/answers about this on SO are pretty outdated by now). Is there a clean solution to this for Safari?

safari iframe css html
5 Answers

I know this question is old but I ran into this today and none of the above solutions worked. This is what ended up working for me. I had to add the webkit mask image to the iframe wrapper.

    .iframe-wrapper{
       //other css here
       border-radius: 10px;           
       -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

   <div class="iframe-wrapper">
      <iframe></iframe>
   </div>
user_24110540

clip-path CSS property also worked for me.

clip-path: inset(0% 0% 0% 0% round 10px);
user_136792730
Related