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:
Loading ...