CODEWITHSUNDEEP
css
KodeFor.Me
KodeFor.Me

Reputation: 13511

Border radius doesn't work on safari?

I am creating a WordPress theme, and I have four images, that should be displayed as circles with border.

My HMTL code is the following:

<div class="row homeCategoryImageLinks">
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
</div>

and this is my CSS code:

.homeCategoryImageLinks a
{
    z-index: 3502;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.homeCategoryImageLinks a img
{
    display: block;
    border: 5px solid #FFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
}

The problem is that, while this code work fine in any browser I have test, doesn't work in Safari.

The desired result should be the following:

enter image description here

and Safari return this:

enter image description here

How can I fix that issue ?

Note : The above code work in every tested browser as desired, but not for Safari. The Safari web browser is the exception.

Note 2 : Here you can see live the problem : http://jsfiddle.net/87EZV/1/

Kind regards.

Upvotes: 5

Views: 10435

Answers (3)

Jared
Jared

Reputation: 3016

Safari is buggy with border-radius: -webkit-border-radius acts differently from -moz-border-radius

I recommend applying border-radius and overflow: hidden to a parent wrapper for the image. That parent will clip the image inside it.

You may need to apply display: block or position: relative to ensure the browser accepts the styling.

Upvotes: 2

user2021917
user2021917

Reputation:

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*/  
}

Upvotes: 3

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

Try 

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

Heres ur demo

Upvotes: 1

Related Questions