Rounded corner div with HTML5 and CSS3

I have been recently playing with HTML5 and CSS3 and it is really fun. I am learning lots of new features of HTML5. Rounded corner is one of them. I thought it will be a good idea to share that with my readers. So In this post we are going to learn how we can create rounded corner div with HTML5.

In earlier version of HTML and CSS, If we need rounded corner div then we all needs to use image and without image it was not really possible. But now with the HTML5 and CSS3, It is very easy to create round corner div.

How to apply round corner to div?

There is a new CSS3 declaration for that. Border-Radius, With this you apply round corners to boxes and div without using images for rounded corners.

Example:

Let’s create an example for rounded corner div. I have created an sample page with Visual Studio 2012.

And then I have written following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .roundedCorner {
            color:white;
            border-radius:20px;
            background-color: blue;
            height:100px;
            width:100px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="roundedCorner">
        This is a rounded corner example
    </div>
</body>
</html>

Here you can see that I have created a class roundedCorner and then applied that class to div. In class I have written border-radius :20px to make it rounded. Now let’s run this code.

Here you can see that div is now with rounded corner.

Best practice for border-radius rounded corner:

Now days there is a chances that our pages can be viewed on any device so there may be web kit browser or any browser so for best practice we should use following CSS when applying rounded corner.

.roundedCorner {
    color:white;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    background-color: blue;
    height:100px;
    width:100px;
    text-align:center;
}

Here you can see above code I have applied two other attributes -webkit-border-radius and -moz-border-radius. This attributes will make sure that it will look same on all the browsers.

That’s it. Hope you like it. Stay tuned for more..

DotNetJalps