Blog

Bordering Insanity

The bug has to deal with how Firefox renders dotted borders which are also rounded. When the div has a positive border-radius defined as well as the border-style is set to dotted, some funky stuff happens.

See for yourself:

• The first div has simple dotted borders on a rectangular box.
• The next set has simple dotted borders on a rounded-border
• To see more fun, see the third div, which has translucent border colours.
• As a bonus, and an interesting design, I present to you the CSS Hourglass, made with one line of CSS and helped by some very bad implementation by Firefox!

Although Chrome does handle these cases well, it does not really draw a dot in the dotted border, but chooses to use ugly rectangular bits.

How it is rendered in Firefox 26.0

And with this I wrap up. Have fun.