Back in the CSS 2 days, giving images or div elements rounded corners was quite a hassle. The simple option was to use a function that someone had already written in jQuery. If you preferred to do it yourself, you had to design rounded-corner images and overlay them on each other. In short, it was very complicated. But in CSS 3 you no longer need such cumbersome tricks. You can just set it directly in your CSS!
Note: This feature requires a browser that supports CSS 3, such as IE 9, Firefox 4, Chrome, Safari, and other modern browsers.
Syntax:
border-radius:radius; //This applies the rounded corners to all four corners: top-left, bottom-left, top-right, and bottom-rightYou can use various units for the radius value, such as px or cm.Example:
Create a div with id=ex, and set its style as follows:#ex{
width:200px; //Set the width of the box
eight:200px; //Set the height of the box
margin:0px auto; //Center the box horizontally; this has nothing to do with the rounded corners
border:1px solid #000; //Set a border so the rounded corners are easy to see
border-radius: 10pt; //Apply a 10pt rounded corner
}I saw online that you could round just one specific corner (top-left, bottom-left, top-right, or bottom-right), but when I actually tested it, none of them seemed to work. Also, many articles say you need to add the -moz- or -webkit- prefixes to get rounded corners in Firefox, Chrome, and Safari. But in my testing, the latest browsers no longer need the prefixes, because border-radius is now part of the CSS 3 standard. The prefixes (-moz-, -webkit-) are not really necessary anymore, unless you really care about backward compatibility xD