6

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?

1
  • Okay apparently this does actually work, but having something position: fixed in the iframe content is what breaks the rounded corners.
    – Johnny
    Jul 31, 2017 at 22:50

5 Answers 5

14

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>
3
  • 1
    You saved my day.
    – mpoisot
    Nov 6, 2019 at 23:49
  • This fixed an issue where the rounded cropping worked on desktop Chrome and Safari but not on either mobile version.
    – evolross
    Sep 30, 2020 at 20:34
  • This is the answer for mobile... saved me. Thanks so much. Feb 15, 2021 at 7:22
0

What exactly doesn't work? I have tested it in Safari but it seems to be working.

<div class="modal-iframe-wrapper">
 <iframe class="modal-iframe" src="https://example.com"></iframe>
</div>

.modal-iframe-wrapper {
 overflow: hidden;
 border-radius: 8px;
 width: 400px;
 height: 400px;
 background: red;
}
iframe { widith: 100%; height: 100%; border: 0; }

https://jsfiddle.net/jwb546k6/

1
  • 3
    Oh, so it does. I dug into my own situation more, and it seems like if you have something inside the iframe that's position: fixed, then the rounded corners no longer work. You can see this by setting the h1 inside the example page to fixed and watch the corners disappear.
    – Johnny
    Jul 31, 2017 at 22:48
0

Try adding: overflow: hidden to the "wrapper" and

 width: 100%;
 height: 100%;

To the modal-iframe. Then you can change the height using the "wrapper".

.modal-iframe-wrapper {
  overflow: hidden;
  border-radius: 8px;
  overflow: hidden;
  height: 500px;
  width: 500px;
}
.modal-iframe {
  width: 100%;
  height: 100%;
}
<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

0

Apply the border-radius to the iframe instead

.modal-iframe {
  border-radius: 8px;
}
<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

0

clip-path CSS property also worked for me.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.