elliptical borders in Firefox 3.5 at hacks.mozilla.org

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 Responses to “elliptical borders in Firefox 3.5”

Feed for this Entry Trackback Address

1 Neil Rashbrook
July 16, 2009 at 2:14 am

OK, I give up. Why do g and e render differently?
2 g
July 16, 2009 at 9:22 am

@Neil

I was just trying to figure out that same thing! It doesn’t make sense even what the extra “blue” does in g
3 Lim Chee Aun
July 16, 2009 at 9:39 pm

@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
4 j.j.
July 17, 2009 at 2:02 pm

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