CODEWITHSUNDEEP
htmlcssiframesafari
Johnny
Johnny

Reputation: 838

Rounded corners for an iframe not working in Safari

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?

Upvotes: 6

Views: 4201

Answers (5)

Lazac92
Lazac92

Reputation: 145

clip-path CSS property also worked for me.

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

Upvotes: 0

agritton
agritton

Reputation: 1328

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>

Upvotes: 15

Michael Coker
Michael Coker

Reputation: 53684

Apply the border-radius to the iframe instead

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

Upvotes: 0

seanysean
seanysean

Reputation: 421

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>

Upvotes: 0

robinl
robinl

Reputation: 86

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/

Upvotes: 0

Related Questions