How to use CSS3 border radius

The outdated CSS2.1 didn’t support the CSS design of round corners. To create such corners developers were therefore always obliged to make use of background images which significantly increased the loading time of websites. Thanks to CSS3 the use of background images are virtually history because CSS3 disposes of the border-radius functionality. To guarantee a correct Mozilla Firefox display of these round corners the border-radius functionality needs to be combined with the moz-border-radius. The border-radius values which need to be used in the short border-radius version are:  upper left – upper right – bottom right – bottom left, which would look like:

p{
border-radius: 1px 2px 3px 4px;
-moz-border-radius: 1px 2px 3px 4px;
}


Was this useful?