KuljeetSingh.com

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{
    border-top-left-radius:20px;
    border-top-right-radius:50px;
    border-bottom-left-radius:70px;
    border-bottom-right-radius:90px;
}
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(/)

.corners{
    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
【丰胸】虽然,这些药物对于乳房而言粉嫩公主,能够起到一定的丰胸效果,可朋友们这些药物的后遗症,也会在我们服完后慢慢显现出来丰胸产品,譬如:机体中的雌激素水平被打破了,就容易导致我们的月经变得不正常丰胸食物,从而使得我们的腰跟着变得圆嘟嘟,而严重的话还可能会导致我们的子宫出血,肝脏受损丰胸效果,所以说若是采用药物来进行丰胸,大家还是小心谨慎些为好。