Saturday, June 8, 2013

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.

Rounded Corner div html5 and css3


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.

image

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..
Share:

2 comments:

  1. Useful resource, i will try in my project, keep it up sharing more thinks, it is really useful one:)

    ReplyDelete
    Replies
    1. Thanks.I will keep writing blog. Reader like you inspired me a lot.

      Delete

Your feedback is very important to me. Please provide your feedback via putting comments.

Search This Blog
About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews