CSS 3 new amazing feature - border radius
One of the thing many developers hate doing is to try and make some border rounded, usually to get this mission done, one needs to get messy with images and table.
Here is a sample of a rounded login control I built :
As you can see in the top of this control the border is rounded.This is done using table and images created especially for the top left and top right.
As it turns out, in CSS 3 (Which is not a standard yet) we can accomplish this mission very easily with the new border-radius property.
In IE this CSS 3 property is not supported, so i had to download "Mozilla Firefox" in order to show this sample.(It want easy to decide to download this "other" browser)
Here is a simple div with no rounded corners:
and here is the HTML and CSS for it:
<html>
<head>
<style>
div
{
padding:30px;
margin:30px;
background-color:yellow;
color:Red;
width:60px;
height:60px;
}
</style>
</head>
<body>
<div>
Some text
</div>
</body>
</html>
Now here is the same div with the new property from CSS 3:
and all I did was adding:
-moz-border-radius: 15px; to the div selector in the CSS. Amzing right?