This is part 2 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed RGBA And Opacity. This time around we’ll be tackling rounded corners.
We all love rounded corners and in order to achieve that look, in the past we had to use images. CSS3 makes this much easier. To add rounded corners just put the following in your style.
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
If you want to round individual corners, you can do the following:
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-webkit- targets Webkit based browsers like Safari and Chrome while -moz- targets Firefox.
Browser support: border-radius is supported by Webkit- and Gecko-based browsers but not by any version of Internet Explorer or Opera. In unsupported browsers you will just get a rectangle or square.
In my next posting I will discuss the usage of multi-column layouts and how they can make your content easier to read by using a newspaper-type design.
Tags: cascading style sheets, css, css3, structured markup, website design
