CSS3 Border-Radius & Rounded Corners
Use CSS3 border-radius to make your corners rounded! In this edition of the CSS3 series, we use the third generation Style Sheet language to round the corners of our layers both collectively and individually.
Cross Brower Compatability
As previously mentioned in An introduction to CSS3, not all current browsers support CSS3 but for those good browsers that chose to be compatible, we have two prefixes that we can work with.
-moz (e.g. -moz-border-radius) works in FireFox.
-webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome.
Round Corners with CSS3 (Collectively)
The ability to have rounded corners without using images has been something long saught after, removing the need for creating corner images with appropraite backgrounds which, at best of times, was a very time consuming task. Now with CSS3 (browser permitting..) we can create rounded corners in just a few lines of code.
Round Corners with CSS3 (Individually)
This of course does not have to be done collectively! It is possible to round corners individually.
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition