Rounded corners of Div using CSS

In early versions of browsers when CSS3 was not supported, rounded corner of any div was done using images. Now it can be done in simple HTML CSS. ASP.NET ajaxtoolkit also provides an extender for the same. This can be used for rounded corners of ASP Panel controls

HTML and CSS Method
With CSS3, it has become a single line statement to create rounded corner Divs. .corners{
    border-radius:20px; }

Above line will create same rounded corner for all corners of div with radius of 20px.

Now what if we want to display different angled curves of all corners of a div. Well, we can do that by mentioning radius of all corners. .corners{
This will result like below:

Great! Defining border in this type will create corner in the circle type round shapes. One can also define oval type corners with different radii for horizontal and vertical radius.

This can be done with simply using slash to determine Horizontal vs Vertical radius. .corners{
    border-radius:50px / 20px;

Here also we can define individual dimensions for each corner and while defining individual dimension we can leave using of slash(/)

    border-top-left-radius:50px 20px;
    border-top-right-radius:50px 30px;
    border-bottom-left-radius:50px 40px;
    border-bottom-right-radius:50px 70px;

As we have seen CSS has given a lots of functionality and flexibility in shaping Divs which was not possible earlier. creating the rounded corners of any div was a very lengthy process using images and aligning to the corners.

Hope, it may be useful.


Blogs | About Me | My Projects | Contact Me