CODEWITHSUNDEEP
htmlcsssafariwebkitsass
David Ingledow
David Ingledow

Reputation: 2095

border-radius not making image circular in Safari in div with padding and border

I have a <div> with an img inside.

Structured like:

<div class="gift">
    <img>
</div>

The div has this CSS:

display: inline-block;
overflow: hidden;
width: auto;
vertical-align: middle;
position: relative;
border-radius: 50em;

The image has this CSS:

border: 1px solid 
rgba(46, 46, 46, 0.1);
border-radius: 50em;
padding: 3px;
min-height: 10em;
height: 10em;

In Safari, it looks like 1:

Safari image clipped

But, in Chrome it looks how it is supposed to 2:

Chrome - image appears correctly

Any suggestions on how to get the image to appear in Safari the same way it does in Chrome?

Upvotes: 2

Views: 3661

Answers (2)

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

I overcome this issue by using rounded PNG images with rounded border and 50% of radius.

Upvotes: -2

David Ingledow
David Ingledow

Reputation: 2095

Fixed by basically by give img this CSS:

img{
    border-radius: 50em;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
}

And gave the div this CSS:

div.gift{
    overflow: hidden;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
    border: 1px solid rgba(46, 46, 46, 0.1);
    padding: 3px;
    border-radius: 50em;
}

The border-radius value doesn't matter so long as it's bigger than the height and width values to get a cirlce.

Upvotes: 3

Related Questions