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?
position: fixed
in the iframe content is what breaks the rounded corners.