I recently skimmed the source-code of an app on the itunes.apple.com website and noticed when accessing the app image that the underlying image is plain squared! This means Apple somehow visually "wraps" the image with some technique to make it appear as if it has rounded corners! As I'm no expert on such details, yet would like to know how Apple achieves this.

The reason is that in my opinion this visual display of all apps (also in the iTunes App Store software) is a crucial, consistant aspect of Apple's app display. As I want to work on something related to Apples applications (and maybe also sign up for their affiliate program, which might answer this question, but I didn't do so yet), so I need to be informed about this issue.

Thank you for your help in advance.

  • 2
    You might want to check the "other" Stack Exchange site for web devs, as they might give you a better insight about this "trick". Even stackoverflow.com may be better suited. Jan 9 '12 at 10:00
  • This isn't a question about Apple software; it's a question about Web development. Please take a look at the FAQs for more info. Thanks. Jan 9 '12 at 15:23
  • Ok sorry guys, I checked the FAQ's beforehand (!), but I guess I misinterpreted it... The FAQ talks about Apple products and SERVICES ! Maybe clarify the FAQ, then it wouldn't happen. Jan 10 '12 at 8:02
  • And @MartínMarconcini do you mean the "webmaster" or "programmer" stackexchange or which? There is none named "web devs". Jan 10 '12 at 8:03
  • @grunwald2.0 I believe the most appropriate one is graphicdesign.stackexchange.com Jan 10 '12 at 12:51

The trick is to overlay a masking icon which contains a border and some shadow. With CSS this is positioned exactly above the underlying icon.

This is the image: http://r.mzstatic.com/htmlResources/F96C/images/mask175.png

If all you need is rounded corners, there is some CSS (3) only tricks for that, though it will look a bit different then.


Not the answer you're looking for? Browse other questions tagged .