Rounded Cornes (Border Radius) Safari Issue

Rounded cornes (border radius) Safari issue

To illustrate the problem in Safari, let's begin with a plain image.

Here we have an image of 100px x 100px. Adding a border of 3px increases the element dimensions to 106px x 106px:

Now we give it a border radius of 20%:

You can see it starts cropping from the outer boundary of the element, not from the image itself.

Further increasing the magnitude to 50%:

And changing the border color to white:

You can now see how the issue arises.

Because of such behavior of the browser, when creating an image in a circle with a border, we have to make sure both the image and the border are given a border radius. One way to ensure this is to separate the border from the image by placing the image inside a container, and apply border radius to both of them.

<div class="activity_rounded"><img src="http://placehold.it/100" /></div>

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img  {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

And now we have a nice circle border around the image on Safari.

See DEMO.

Border radius doesn't work on safari?

You will get answer CLICK HERE.
You have to use different approach as suggested by fellows.

You have to use this or any different approach till safari fix this bug.

.class{
        display: inline-block;
        -webkit-border-radius: 50%;

}
.class img{

        border: 10px solid #ffffff;
        width:100px;/*as like if needed*/  
        height:100px;/*as like if needed*/  
}

Overflow: hidden with border radius not working on Safari

The accepted answer works, but indeed it removes the box shadow. A comment I saw in this github post says that it can be also fixed by creating a new stacking context (kind of moving an element into a new painting layer). That can be achieved with a small hack like

transform: translateZ(0)

import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    imgStyle={{ borderRadius: '20%' }}
  />
);

a:hover {  text-decoration: none;}
.outer {  width: 300px;  border: 3px solid red;  border-radius: 30px;  overflow: hidden;}
.inner {  display: block;  width: 100%;  height: 100%;  background: yellow;  border: solid 1px transparent; /* Safari workaround */  margin: -1px; /* counter-act the workaround */}

<div class="outer">  <a href="javascript:void 0" class="inner">hello</a></div>

position: relative;
top: -.15em;

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