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?
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; }