Forum Moderators: not2easy

Message Too Old, No Replies

-webkit-border-radius in mobile Safari

On an img, works in Safari, not on iPhone

         

Nutter

12:17 pm on May 9, 2010 (gmt 0)

10+ Year Member



I'm putting together a portable version of a site and having an issue with the -webkit-border-radius property on the iPhone.

Here's the applicable CSS...
img.thumbnails {
-webkit-border-radius: 10px;
max-width: 80px;
}


It works without a hitch on Safari on a Mac, but the images don't show the correct radius on the iPhone or iPhone simulator. They still show square corners. I can change other properties in the CSS file and have it update so I don't think it's a caching issue.

Nutter

3:40 pm on May 9, 2010 (gmt 0)

10+ Year Member



I've come across a partial solution. If I create a div with the image as background and set that div to have a border radius then it works. That's ok for a few of the pages where there's only a single image, but there are pages with thumbnails and getting the image size for dozens of images doesn't seem like an efficient way to doing this if there's an easier CSS way that I'm just missing.

Is there an issue with using -webkit-border-radius on non block elements?