round corners

Explanation: This CSS declaration (border-radius) allow you to apply round corners to boxes on a page without relying on images. Can add nice effects. More eye candy than user interface enhancement.

Example CSS code:

For this particular class, we specify the border-radius (20px). We can also specify individual values (using specific syntax or a short hand notation). The comments in the example code below provide more details. Note both -webkit and -moz prefixes should be employed at the time of this writing.  As is good practice, we should also always include a default value when all browsers support this.

.border {
-webkit-border-radius:20px;
-moz-border-radius:20px;
-border-radius:20px;

//    -webkit-border-bottom-left-radius:20px;
//    -webkit-border-top-right-radius:10px;
//    -moz-border-radius-topright:10px;
//    -moz-border-radius-bottomleft:20px;

//    -webkit-border-radius:10px 20px 20px 5px;
//    -moz-border-radius:10px 20px 20px 5px;
}

Example page (view the source code): http://learning-html5.info/CSS3/CSS_RoundCorners.html (will work in most modern browsers). Various  border radius examples are provided on the page.

References:

Leave a Reply

Your email address will not be published. Required fields are marked *