Published in Brighton, UK

Clagnut

Curvacious

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.

19 April 2002

§ Web standards · Browsers

3 comments

Next

Previous

Related posts

Keywords

Machine tags

Comments

  1. 1

    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… :-)

    Jan!
    3 Apr 2003
    11:56 GMT
  2. 2

    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

    Laurens Holst
    22 Mar 2004
    16:40 GMT
  3. 3

    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.

    Ian
    10 Jul 2005
    14:38 GMT

Add your comment

Comments are now closed on this post. If you have more to say please contact me directly.

Outside interest

Top Referrers

mobile comment