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:

6 Responses to Rounded corners using nothing but CSS

  1. That’s really impressive.

  2. nice says:

    Great job, I love this css tricks.

  3. Malcolm says:

    Although I haven’t tried it, the CSS selector -webkit-border-radius supposedly works on the iPhone. See http://www.westciv.com/iphonetests/
    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 says:

    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 says:

    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 says:

    Ivan,

    I think you’re a dick.

Leave Your Mark

Recent Posts

BINGO Blitz

Personal Gallery

Solitaire and Prizes

Serf Wars

Action AllStars