CSS: Corners

by MythOfEchelon

HTML

<!DOCTYPE html> <!-- This is just my basic HTML5 template. Make sure you set this up correctly for your personal needs -->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                float: left;
                width: 300px;
                height: 100px;
            }
            
            #wrapper {
               width: 300px;
               height: auto;
            }
            
            #exampleElement1 {
                border: 3px solid blue;
                
                border-radius: 15px;
                -moz-border-radius: 15px; /*Support for Firefox*/
            }
            
            #exampleElement2 {
                border: 3px solid red;
                
                border-top-left-radius: 50px 50px;
                -moz-border-radius-topleft: 50px 50px; /*Support for Firefox*/
            }
            
            #exampleElement3 {
                border: 3px solid green;
                
                border-bottom-right-radius: 25px 50px;
                -moz-border-radius-bottomright: 25px 50px; /*Support for Firefox*/
                
                border-bottom-left-radius: 25px 50px;
                -moz-border-radius-bottomleft: 25px 50px; /*Support for Firefox*/
            }
            
            /* More info on border radius': http://www.css3.info/preview/rounded-border/ */
        </style>
    </head>
    
    <body>
        <div id="wrapper">
            <div id="exampleElement1"></div>
            <div id="exampleElement2"></div>
            <div id="exampleElement3"></div>
        </div>
    </body>
</html>