The sample HTML below does work in the desktop version of Mac Safari but not the iphone 3.0 version (and, presumably, previous versions). Desired behavior is to have the corners of the image rounded off. If you add colored padding of ~10px to the style definition, you can see that the in mobile safari, padding gets rounded off, but then the image with unrounded corners gets drawn over the rounded padding. If webkit on the iphone and the mac desktop call the same platform drawing routine, I guess that indicates that the iphone implementation of the function that clips the corners works differently from the desktop version (I poked around a little bit in the code -- seems that CGContextClipToRect is what is getting called on the host platform. Could be mistaken, though. First time looking at webkit code) <html> <head> <style type="text/css"> img { -webkit-border-radius: 100px; } </style> </head> <body> <img src="http://www.fis.ncsu.edu/trademark/images/ncsu/new_cd/NCS_MonoS_2C_2.gif"> </body> </html>
Please file MobileSafari bugs at http://bugreporter.apple.com