|
CSS 3 Rounded Corners Example |
||||||||
My curiosity into CSS 3 was piqued at Scotch on the Rocks 2010 this year. There was a very good presentation from Chris Mills from Opera http://twitter.com/chrisdavidmills where he touched on some of the new CSS 3 and HTML 5 functionality that some of the modern browsers are taking advantage of. I particularly liked some of the really simple, but visual CSS 3 changes, in this case rounded corners.
This article is a quick example of how to add rounded corner styling to your designs.
Here is a demo of CSS 3 rounded corners in action.
This is a purely CSS 3 driven example. There are two specific css parts to add to your div elements that will make the corners rounded.
2-webkit-border-radius: 5px;
3border-radius: 5px;
We use two styles as each is applied to different browser engines, Mozilla based browsers and webkit based browsers.
You can make individual corners rounded by specifying each element individually.
2-webkit-border-top-left-radius: 5px;
3
4-moz-border-radius-topright: 5px;
5-webkit-border-top-right-radius: 5px;
6
7-moz-border-radius-bottomleft: 5px;
8-webkit-border-bottom-left-radius: 5px;
9
10-moz-border-radius-bottomright: 5px;
11-webkit-border-bottom-right-radius: 5px;
The nice thing about this is that if a browser does not understand the styles it just doesn't do it, IE it degrades nicely.
Here is a demo of CSS 3 rounded corners in action.
I have since found a JQuery plugin that does much the same, but that will be another article.
Addendum:
Based on comments on this article I realised I'd actually left off the 'pure' CSS3 version of the code! The non browser specific CSS 3 version uses the 'border-radius' class, followed by a numeric value in pixels. Here is an example:Once all browsers become fully CSS3 compliant we should not need the '-moz' and '-webkit' variants at all. The last div in the demo page is using this code.
I think what you're demonstrating is two browser specific implementations but *not* a "purely CSS3 driven" example. Of course, CSS3 is still in development and probably won't be approved for ages, like HTML5. But certain elements like rounded corners are not likely to change much until then, so implementing the recommendation directly in addition to what you've demonstrated might save you having to fix it once browsers adjust to final specs. *And*, it'll work with browsers such as Opera which are implementing the proposed specs directly ;) That is, border-radius - without the engine prefix. That's also why your examples, inspired by an Opera evangelist, don't work in Opera :)
I've since found a JQuery way of doing this, which whilst maybe being a bit heavier as its JS is totally cross browser.