Rounded corners using nothing but CSS

Rounded corners structure

Recently I was working on iPhone-specific web-based login pages, and for the sake of consistency I wanted to mimic the rounded-corner look of the iPhone interface. I looked around for solutions, but everything I could find either used images, Javascript or both, which seemed like serious overkill for this purpose.

Long story short, I ended up putting (hacking?) together my own solution, one which relies solely on CSS to render the rounded corners, using the structure shown in the image to the right. The end result looks something like THIS and it works in both IE and Firefox.

I think it’s a fairly elegant way to do this, and I’m pretty sure somebody else somewhere must have figured this out already (considering the number of people who are significantly better at CSS than I am) but since I couldn’t find anything similar out there, I decided to share it here.

The complete CSS/HTML template is as follows:


  1. Robert Mathison
    October 22, 2008 @ 12:41 am

    That’s really impressive.

  2. nice
    February 8, 2009 @ 7:09 pm

    Great job, I love this css tricks.

  3. Malcolm
    February 13, 2009 @ 9:37 pm

    Although I haven’t tried it, the CSS selector -webkit-border-radius supposedly works on the iPhone. See
    For mozilla, use -moz-border-radius.
    For IE, use conditional comments to include the great CSS you have developed above.
    However, I don’t think the above selectors will validate.

  4. Ivan
    February 28, 2009 @ 6:30 am

    First let me congratulate you because I can see you spent quite a few hours doing that and the effect is indeed absolutely nice, I’ll give you that. Secondly, I just think you were better off using just images, you just killed the whole idea of semantic HTML, I happen to think what you did is nonsense.

  5. edvardtoth
    February 28, 2009 @ 6:58 am

    Thanks for the feedback, I’m not sure if I should feel complimented or feel insulted, haha.

    Nobody disputes that in general it makes way more sense to use images and/or JavaScript, but – like the description says – it was inspired by one of those odd cases where neither made much sense.

    Yeah, the practical utility of this solution is pretty limited so just accept it for what it is: a neat trick. 😉

  6. Truth
    October 18, 2011 @ 9:01 pm


    I think you’re a dick.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: