Dreaded Image Border Radius in Safari

[leecorkett]

I know this has been asked and answered a million times over, but each solution seems to be a little different and I can’t seem to get any of the scores of posts I’ve read to work for me.

I’m building a WooCommerce enabled site and am having problems with the image border radius in Safari. I’m pretty new to CSS and envisioning the scale of the problem and solution is escaping me. Since this is a pretty common problem, I’ll be brief.

Here’s the layout – setting up my store with Woothemes – I’ve set an image border radius to my thumbs in the store – it looks great in Firefox, looks crap in Safari. – I simply can’t figure out how to make it work using the solutions I’ve been reading out about. I’m sure there’s something simple I just haven’t grasped yet.

Here’s the link to the store: http://printologie.com/shop/ – and a single product page which presents the same issue: http://printologie.com/shop/akuafoil-cards/

and here’s the code from my custom.css (the simple -webkit tag doesn’t seem to fix it):

ul.products li a img {
background: none repeat scroll 0 0 transparent;
border: 1px solid #FFFFFF;
-webkit-border-radius:80px 60px 80px 60px;
-moz-border-radius:80px 60px 80px 60px;
-o-border-radius:80px 60px 80px 60px;
-ms-border-radius:80px 60px 80px 60px;
border-radius:80px 60px 80px 60px;
box-shadow: 0 0 0 0 transparent;
display: block;
height: auto;
margin-bottom: 0.75em;
padding: 4%;
width: 91%;
}

[Paulie_D]

I’m not sure what the issue is….you have a border radius applied and it seems to be working in Chrome…which can’t be that different to Safari.

Exactly what does ‘looks crap’ mean?

[TheDoc]

@Paulie_D – http://cl.ly/image/0V2g3j3K1z1K

[nordstromdesign]

Do you have an image of what you would like it to look like?

[TheDoc]

Doin’ all the work here haha.

@nordstromdesign – http://cl.ly/image/180A1L272b0x

[Paulie_D]

This is weird.

In Safari now but it works on the ‘Shop’ page

.imagewrapper{
-webkit-border-radius: 80px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius: 80px;
-moz-border-radius-topright: 60px;
-moz-border-radius-bottomleft: 60px;
border-radius: 80px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border: 10px solid rgba(247, 245, 241, 0.1);
}

ul.products li a img {
background: none;
border: none;
-webkit-border-radius: 80px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius: 80px;
-moz-border-radius-topright: 60px;
-moz-border-radius-bottomleft: 60px;
border-radius: 80px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
box-shadow: none;
display: block;
height: auto;
margin-bottom: 0;
padding: 0%;
width: 100%;
}

but not on the ‘Product’ page.

/* Controls image on woocommerce single product page – border radius controls corner rounding */
.woocommerce .images img {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 80px 20px 20px 5px;
height: auto;
padding: 4%;
width: 92%;
}

[KarimCossutti]

Wrap the image in a div, apply styles to the div, set div to overflow hidden.

[Author]

Posts