The New Web? CSS3

0800 156 0777

The New Web? CSS3

In case you were wondering, you can create rounded corners in web pages now, without graphics. However it takes CSS3 to do it, and although the standard has not been finalised yet, it doesn't mean that the browsers are not taking advantage of any new techniques that they like. Such as rounded corners. At the moment I have only tested Safari and Firefox with this code - I do not know if it is possible in Chrome, IE, etc - but here is the css code... Firefox (mozilla)

-moz-border-radius: 5 px {{for all corners, circle}}

-moz-border-radius: 5 px 10px{{for all corners, but an ellipse}}

Safari

-webkit-border-radius: 5 px {{for all corners, circle}}

-webkit-border-radius: 5 px  10px{{for all corners, ellipse}}

If you want each corner to be different just use the following...

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-radius-bottomleft

-moz-border-radius-bottomright

-webkit-border-top-left-radius

-webkit-border-top-right-radius

-webkit-border-bottom-left-radius

-webkit-border-bottom-right-radius

Just put these lines in your CSS rule and voila! The good news is, if someone logs on with a browser that doesn't support them, they are ignored. Have fun and let me know what you think btw just google w3.org, css3, border-radius to get the full, propsed spec and see what else may be on the way.