elliptical borders in Firefox 3.5

Today’s demo comes from Lim Chee Aun, the creator of the Phoenity icons and themes, and web developer in Malaysia.

The border-radius property is probably one of the most interesting parts of the CSS3 specification, where it allows you to create rounded corners on elements. For example:

div {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

In Firefox 3.5, -moz-border-radius has been updated to match the latest revision to the CSS3 specification. Thus now, we can create elliptical borders.

So, what does that mean? According to the specification, the syntax is:

-moz-border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?

It shows the set of values accepted for this property, plus an optional slash with another set of values. This is where the magic comes from. If two sets of values are given, values before the slash set the horizontal radius and values after it set the vertical radius.

This opens a few interesting possibilities. This demo shows some experiments on certain types of shapes that you can play with.

View the Demo in Firefox 3.5

In the demo, it’s not only possible to modify the border width, style and radius, but also the style as well, such as ridge, double and groove. As of now, dotted and dashed doesn’t work yet and being rendered as solid. For more information, see Mozilla bug 431176 .


7 comments

  1. […] elliptical borders in Firefox 3.5 Could find some interesting uses for this. Of course, IE still doesn’t support basic round borders using border-radius. I will now light my computer on fire. […]

    July 15th, 2009 at 14:07

  2. Neil Rashbrook

    OK, I give up. Why do g and e render differently?

    July 16th, 2009 at 02:14

  3. g

    @Neil

    I was just trying to figure out that same thing! It doesn’t make sense even what the extra “blue” does in g

    July 16th, 2009 at 09:22

  4. Lim Chee Aun

    @Neil @g

    It renders differently because of the colors. As the left and right borders are in zero pixels, it make sense that the blue borders shouldn’t show, in example ‘g’. In example ‘e’, it shows because there’s no color change and kind of make sense as well. According to the CSS specs, “It is not defined what the transition looks like, but a gradient is recommended for color transitions that don’t involve dotted or dashed borders.”.

    And this leads to Mozilla bug 483696
    https://bugzilla.mozilla.org/show_bug.cgi?id=483696

    July 16th, 2009 at 21:39

  5. j.j.

    Elliptical borders work in Safari/WebKit as well but the syntax follows an older draft. So the -webkit- styles in the demo don’t work.
    Would be easy to fix, see
    https://developer.mozilla.org/en/CSS/-moz-border-radius#Browser_compatibility

    July 17th, 2009 at 14:02

  6. […] serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Elliptical Borders in Firefox 3.5, którego autorem jest Lim Chee Aun (web developer z Malezji, autor ikon i motywu Phoenity). […]

    July 29th, 2009 at 05:24

  7. […] serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Elliptical Borders in Firefox 3.5, którego autorem jest Lim Chee Aun (web developer z Malezji, autor ikon i motywu Phoenity). […]

    July 29th, 2009 at 05:25

Comments are closed for this article.