The Border Radius with CSS
In another post, I covered how to create a border using css. Today I am going to tell you about the border radius property. This property allows corners to be rounded.
The other post left off with the basic html:
and the CSS
border:2px solid #cc0000;
To use the border radius property only a little more code needs to be added. First decide how round the corners should be. I am going to make them 10px. To accommodate multiple browsers, two bits of css need to be added to the original CSS style.
border:2px solid #08945e; /*this is a comment, the border color has been changed from red to green*/
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
After adding those two statements, the original box now has rounded corners.