bug 114 - border dashing and rounding not an option in Firefox

Issue: #114
Affects: Firefox 2.x
Fixed in: Firefox 3 (Beta 3 & Final)

Rounded corners make simple boxes look so much more appealing on the Web. CSS3 defines the border-radius CSS property, but of course Firefox, Safari and others implemented their own versions long ago before CSS3 was finalized.

In Firefox, specifying "-moz-border-radius: 5px;" for a block element will give a nice gentle curved corner to any box.

However, if your border is more than 1 (one) pixel in width, and you have it set to dashed, or dotted (e.g. not solid), then Firefox will not show the dashed/dotted pattern, but instead show a solid line.

The good news is that Firefox 3 (currently in Beta) appears to have fixed this issue.

Example:

<style type="text/css">
  div.fancy {
    border: 2px dashed #000066;
    -moz-border-radius: 5px;
  }
</style>
<div class="fancy">
This box should have a:<br/> dark blue<br/> 2 pixel<br/> dashed border<br/> with 5 pixel radius<br/> rounded corners.
</div>

This box should have a:
dark blue
2 pixel
dashed border
with 5 pixel radius
rounded corners.

Known Workarounds: None.

Related Issues: None.

Bug/Site Feedback |
Submit a bug