CSS rounded corner for <img> on first-generation iPhones

The following code works in all desktop browsers Chrome and Safari on the Desktop as well as recent iPhones and all Android devices I've tested. However, in first-generation iPhones and the iPhone 3G, the top left corner of the <img> is not rounded.

The other CSS I have for rounding corners (on <h1> elements) on the iPhone seems to work fine on these older devices. It's just the rounding for the <img> element that does not work.

Relevant Javascript:

var profilePhoto = document.createElement("img");
profilePhoto.setAttribute("src","http://example.com/photo.jpg");
profilePhoto.setAttribute("alt","");
profilePhoto.setAttribute("class","menu-first");
profilePhoto.setAttribute("style","float:left; border:0; padding:0!important; margin-top:0!important; -webkit-border-top-right-radius:0; -webkit-border-top-left-radius:.5em;");
document.getElementById('menu-container').appendChild(profilePhoto);

Relevant HTML:

<div id="menu-container"></div>

I am aware of the "rounded corners don't show up if the radius is greater than half the image height or width" issue, and that's not what is going on here. The radius is a tiny fraction of the image size.

JSFiddle: http://jsfiddle.net/RaK3T/

(Wow, JSFiddle actually wo开发者_StackOverflowrks on iPhone 3G, that's awesome!)

UPDATE: I suppose it very well might be the iOS version that matters more than the phone model. It appears to work fine in iOS v4.3.2, but not in iOS v3.

It sounds like you're running into an issues in certain older browsers, whereby the border is drawn as a logical layer beneath the foreground image.

The effect is that the rounded borders are indeed drawn, but the foreground image is then placed on top of them, and is not clipped. This obviously only affects the <img> tag, since it's the only tag that has foreground images.

This issue was a big deal a few years ago. It afflicted some browsers but not others, but certainly for older versions of Firefox and most Webkit browsers, it was an issue.

The problem was quickly spotted and was fixed (somewhat quicker with Webkit than Firefox, if memory serves), and we all moved on.

But it is still an issue for web developers needing to support older versions of these browsers.

There are three workable solutions:

1. Use a background-image style instead of a foreground <img>.
2. Ignore the problem and let older browsers live with square corners (oh the horror!).
3. Use any one of the old-school rounded corner hacks that draw the corners in manually.

Personally my preference is for option 2, I appreciate it doesn't actually answer the question, but I don't have an issue with it: it's a cosmetic detail on old browsers; you wouldn't try to get this working on IE6, would you? (would you??).

If that isn't good enough for you then option 1 is the typical solution that most people went with at the time. But isn't good semantically, and has issues if you need to scale the image, etc.

And the less said about option 3, the better.