Geek Answers Handbook

CSS rounded corner for <img> for the first generation iPhone

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

The other CSS that I use to round corners (on <h1> elements) on the iPhone seems to work fine on these older devices. This is just rounding off for an <img> element that doesn't 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 know that "rounded corners are not displayed if the radius is longer than half the height or width of the image," and this is not what happens here. Radius is a small part of the size of an image.

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

(Wow, JSFiddle really works on iPhone 3G, it's awesome!)

UPDATE . I believe that this is a very good version of iOS, which is more important than the model of the phone. It works fine in iOS v4.3.2, but not in iOS v3.

+4
source share
1 answer

It looks like you are encountering problems in some older browsers, as a result of which the border appears as a logical level below the front image.

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

This problem was a big problem a few years ago. This affected some browsers, but not others, but of course this was a problem for older versions of Firefox and most Webkit browsers.

The problem was quickly detected and fixed (somewhat faster with Webkit than with Firefox if the memory worked), and we all moved on.

But this is still a problem for web developers who need to support older versions of these browsers.

There are three workable solutions:

  • Use the background-image style instead of the foreground <img> .
  • Ignore the problem and let older browsers live with square corners (oh, horror!).
  • Use any of the old-school rounded corner hacks that draw corners by hand.

Personally, I prefer option 2, I appreciate that in fact it does not answer the question, but I have no problem with it: this is a cosmetic detail in older browsers; you wouldn't try to get this to work on IE6, would you? (you would?).

If this is not enough for you, then option 1 is the typical solution that most people worked with at that time. But this is not good semantically and has problems if you need to scale the image, etc.

And the less they talk about option 3, the better.

+1
source

More articles:


All Articles