Skip to main content

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:

<div class=”alert-box”><p>This is a paragraph inside my div.</p></div>

and the CSS

.alert-box {
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.

.alert-box {
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.

<div class=”alert-box”><p>This is a paragraph inside my div.</p></div>