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;
}
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;
}
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>
0
