Fun with CSS rounded corners

posted in Blog March 27, 2010

We all know how useful rounded corners in CSS are and how IE is still banging it’s head against the wall screaming ‘I don’t want to! I don’t want to!’ but you don’t often see someone using them for anything but rounded content boxes. I recently read a very interesting blog post from the guys at CreativeDen that gave great examples of the ‘The hidden power of border-radius‘.

This got me thinking! (I know, dangerous! (; ) ‘If you can ‘draw’ crescent moons and Venn Diagrams only with HTML and CSS, what else could you draw?’ 15 minutes later:

Mushroom in Chrome

Mushroom in Chrome

The (not so tidy)  CSS:

        body {
                padding:100px;
        }
        .ball {
                width:400px;
                height:400px;
                -webkit-border-radius: 200px;
                -moz-border-radius: 200px;
                border-radius: 200px;
        }
        .border {
                background:#be0e0e;
                margin-bottom:-400px;
                border:solid #9d0c0c 7px;
        }
        .red {
                background:#ef2528;
        }
        .white {
                margin-top:-150px;
                background:#fff;
        }
        .dot {
                margin-top:50px;
                margin-left:-50px;
                margin-right:75px;
                float:left;
                background:#fff;
                height:150px;
                width:150px;
                -webkit-border-radius: 75px;
                -moz-border-radius: 75px;
                border-radius: 75px;

        }
        .outer {
                margin-top:80px;
        }
        .facecontainer {
                width:400px;
                margin-top:-400px;
        }
        .face{
                margin:0 auto;
                width:200px;
                height:200px;
                background:#f8d0a5;
                -webkit-border-top-left-radius: 75px;
                -webkit-border-top-right-radius: 75px;
                -webkit-border-bottom-right-radius: 50px;
                -webkit-border-bottom-left-radius: 50px;
                -moz-border-radius-topleft: 75px;
                -moz-border-radius-topright: 75px;
                -moz-border-radius-bottomright: 50px;
                -moz-border-radius-bottomleft: 50px;
                border-top-left-radius: 75px;
                border-top-right-radius: 75px;
                border-bottom-right-radius: 50px;
                border-bottom-left-radius: 50px;
                border-bottom:solid #f4b26c 5px;
                border-top:solid #f2a350 5px;
        }
        .eye {
                float:right;
                margin:70px 35px 0;
                background:#222;
                width:30px;
                height:75px;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
        }
        .pupil {
                background:#fff;
                margin:2px auto;
                width:25px;
                height:35px;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
        }

The HTML:

<div class="facecontainer">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>

So, here’s how it shaped up in different browsers:

Mushroom in Chrome

Mushroom in Chrome

Mushroom in Firefox

Mushroom in Firefox

Mushroom in Safari

Mushroom in Safari

Mushroom in Opera

Mushroom in Opera (Mac - works fine on PC ;)

Mushroom in IE

Mushroom in IE

View the full page here.