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.

closed as off topic by Nathan Greenstein Jan 9 '12 at 15:23

Questions on Ask Different are expected to relate to Apple hardware or software within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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. – Martin Marconcini 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. – Nathan Greenstein 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. – grunwald2.0 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". – grunwald2.0 Jan 10 '12 at 8:03
  • @grunwald2.0 I believe the most appropriate one is graphicdesign.stackexchange.com – Martin Marconcini 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 .