Rounded corners using CSS3

Rounded corners for a div or any container holding your contents in your page looks cool, isn’t it. Good news is that  the latest versions of all the major web browsers support CSS3. So you can use the CSS3  border-radius property directly to create rounded corners. For example to create a 10 pixel border radius this is how it would look. And this works for all browsers.

{
border : 1px solid #afafaf;
border-radius: 10px;
}

There is not much of a work you need to do as you would have done earlier with complex code for handling background images for rounded corners.

CSS3 border-radius compliance for all browsers

Here is an image that shows the compliance table for all major browsers (latest versions at the time or writing this entry). Click here to see a very nice compliance test.

CSS3 compliance table for border-radius

Rounded corners before CSS3

Earlier there were some proprietary CSS properties for creating rounded borders and certain browsers already supported that. For example you can use  the -moz-border-radius property to control the corner radius of a page’s border in older Firefox versions i.e before Firefox 4.0. Similarly for older versions of webkit browsers like safari, chrome you need to use  the -webkit-border-radius or -khtml-border-radius properties. The prefixes before border-radius were necessary.

Sencha Touch Application

Now, lets see a small Sencha Touch mobile demo application that applies the border-radius property. So we are going to generate rounded corners for mobile and it will look pretty cool. Lets look at the entire code first and then I will explain.

    <style type="text/css">
        .about
        {
           border-radius: 10px;
           border-color:#afafaf;
           border-style:solid;
           border-width:1px;
           background:#fff;
           padding:10px;
        }

    </style>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
    <script type="text/javascript">
        Ext.setup({
            tabletStartpScreen: 'tablet_startup.png',
            phoneStartupScreen: 'phone_startup.png',
            icon: 'images/homeblue.png',
            glossOnIcon: false,
            onReady: function(){
                new Ext.Panel({
                    styleHtmlContent:true,
                    title:'About Us',
                    fullscreen:true,
                    html:'<div class="about"><p><b>Who are we?</b></p> The word <b>Zaloni</b> comes from an East Indian' +
                    ' language meaning the <b>nets</b>. <p>We live in a networked world today. Our solutions help' +
                    ' manage network based computing and collaboration.</p></div><br/><div class="about"><p><b>Zaloni = Efficiency</b></p>' +
                    ' Zaloni builds solutions that create efficiencies in your IT environments and help connect your' +
                    ' teams. Our Datacenter solutions for Infrastructure automation helps Enterprise IT departments do' +
                    ' more with less.Our collaboration solutions help enterprises and research organizations connect' +
                    ' within and across the organizational boundaries, share information easily and build relationships' +
                    ' that are vital in today\'s business environment.</div><br/>',
                    scroll:'vertical'
                });
              }
        });
    </script>

As you can see inside the onReady() function I have created a Ext Panel container.   Inside the constructor of the panel the html property sets the contents of the panel. I have two div’s as you can see that will create two boxes of contents. Here I am using the class property to style the div by setting class=”about”. Now, in the style block I have the class selector and then the CSS properties to style the div.

<style type="text/css">
        .about
        {
           border-radius: 10px;
           border-color:#afafaf;
           border-style:solid;
           border-width:1px;
           background:#fff;
           padding:10px;
        }
</style>

I have used the CSS3 border-radius: 10px  property to create rounded borders around the div. Rest of the style block is simple to understand. And this is how it would look if you view your application in a mobile device.

Rounded corner

Conclusion
Using CSS3 border-radius property it is pretty easy to create rounded corners  that looks very good. For browsers that do not support CSS3 you can use the proprietary CSS properties (which I have mentioned above) to create rounded corners.

2 thoughts on “Rounded corners using CSS3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s