CSS diagonal border smoothing in Firefox

Question

I drew the form using the border properties in CSS. It looks great in Chrome, but in Firefox the borders are really ugly:

.shape { width: 100px; height: 50px; margin: 0 auto; background-color: #3F7296; position: relative; color: #FFF; line-height: 50px; font-size: 40px; } .b1, .b2 { position: absolute; left: 100px; bottom: 0px; width: 0px; height: 0px; border-style: solid; border-width: 0px 0px 50px 16px; border-color: transparent transparent transparent #3F7296; } .b2 { left: -16px; border-width: 50px 16px 0px 0px; border-color: transparent #3F7296 transparent transparent; } 

 <div class="shape"> <i class="b1"></i> <i class="b2"></i> </div> 

Fiddle: http://jsfiddle.net/Ly1dz111/

Screenshot from Chrome:

Screenshot from Firefox (Mac OS X)

How can I fix this in Firefox?

Answer 1

This is a well-known error in the Firefox processing of diagonal borders , and a workaround is to set up a large-scale conversion of the element so that Firefox is forced to launch it using an additional graphic step.

In your example, the solution should set -moz-transform: scale(.9999) on the .b1 and .b2 . This forces anti-aliasing in Firefox.

 .shape { width: 100px; height: 50px; margin: 0 auto; background-color: #3F7296; position: relative; color: #FFF; line-height: 50px; font-size: 40px; } .b1, .b2 { position: absolute; left: 100px; bottom: 0px; width: 0px; height: 0px; border-style: solid; border-width: 0px 0px 50px 16px; border-color: transparent transparent transparent #3F7296; -moz-transform: scale(.9999) } .b2 { left: -16px; border-width: 50px 16px 0px 0px; border-color: transparent #3F7296 transparent transparent; } 

 <div class="shape"> <i class="b1"></i> <i class="b2"></i> </div>