Web designers are forever sticking curves in their designs, particularly when smoothing corners of boxes. Designers have good reasons for this, but those of us charged with building the reality find it a pain in the bum, usually having to resort to tables to quickly get the job done. CSS3 is there to fix this and Mozilla is already working on it’s implementation.
Nice curvey box (only with Mozilla)
The code is: -moz-border-radius:20px. Note the standardized -moz- prefix to indicate an experimental feature. The CSS3 box model module describes more of the syntax in its inimitable way. While you’re playing around, have a go with -moz-opacity:0.5.
Jan! wrote:
By now the URL has changed. You should have used that draft’s permalink, because border properties have moved to the border module
Cool URIs don’t change… :-)
Laurens Holst wrote:
I think it’s best to use two variants of this tag like this:
-moz-border-radius:20px
border-radius:20px
If any of these two is understood, it will work, and the last one is given preference because of CSS’s cascading. This makes your code future-proof when more browsers add CSS3 functionality, and when Mozilla might remove the -moz- version in favour of the one without.
Mozilla by the way now also supports the CSS3 tag ‘opacity’ without the -moz- prefix.
~Grauw
Ian wrote:
That’s fantastic! I really hope that makes it into the official spec – I’ve just tried it on my site and it works a treat.