Firefox中带圆角的旋转边框抗锯齿问题

Hey there, I’ve run into this exact Firefox quirk before—rotating elements with border-radius can trigger weird anti-aliasing issues that don’t show up in other browsers. Let’s break down why this happens and fix it with a few reliable solutions:

Why This Happens #

Firefox’s Gecko engine handles rotated rounded borders differently than Blink (Chrome/Edge). When you rotate an element with both border and border-radius, the renderer can struggle to smooth the edges, especially with non-integer dimensions or specific border-radius values like your 9px on a 34px-tall element.

Solution 1: Add a Transparent Outline #

This is a quick fix that forces Firefox to re-calculate edge anti-aliasing without affecting your layout. Just add one line to your .dice CSS:

.dice { 
  margin: 4.5px auto; 
  width: 40px; 
  height: 34px; 
  border: 1px solid black; 
  border-radius: 9px; 
  background-color: ghostwhite; 
  transition: 900ms ease all; 
  text-align: center; 
  line-height: 10px; 
  padding-top: 5px;
  /* Force better anti-aliasing */
  outline: 1px solid transparent;
}

The transparent outline acts as a "hint" for Firefox’s renderer to smooth the rounded edges during rotation.

Solution 2: Replace Border with Box-Shadow #

Firefox handles box-shadow anti-aliasing more gracefully than traditional borders for rotated elements. Swap your border property for a box-shadow that mimics the border:

.dice { 
  margin: 4.5px auto; 
  width: 40px; 
  height: 34px; 
  /* Replace border with box-shadow */
  box-shadow: 0 0 0 1px black;
  border-radius: 9px; 
  background-color: ghostwhite; 
  transition: 900ms ease all; 
  text-align: center; 
  line-height: 10px; 
  padding-top: 5px;
}

This works because box-shadow rendering in Gecko uses a different anti-aliasing pipeline that holds up better during transforms like rotation.

Solution 3: Wrap the Dice in a Rounded Container #

If the above fixes don’t do the trick, move the border-radius and rotation to a parent container, and let the inner dice element fill it. This separates the rounded clipping from the rotated content:

Updated HTML:

<div class="dice-wrapper">
  <div class="dice">1</div>
</div>
<div class="dice-wrapper" id="rotated" onclick="this.style.transform = 'rotate('+ (1*-90) +'deg)';">
  <div class="dice">2</div>
</div>

Updated CSS:

.dice-wrapper {
  margin: 4.5px auto; 
  width: 40px; 
  height: 34px; 
  border: 1px solid black;
  border-radius: 9px;
  overflow: hidden;
  transition: 900ms ease all;
}
.dice { 
  width: 100%; 
  height: 100%; 
  background-color: ghostwhite; 
  text-align: center; 
  line-height: 10px; 
  padding-top: 5px;
}

Now you’re rotating the container (which handles the rounded clipping via overflow:hidden) instead of the dice itself, avoiding the edge-smoothing conflict entirely.

All three solutions should eliminate the jagged edges you’re seeing in Firefox. I’d start with Solution 1 since it’s the least intrusive, then move to the others if needed!

内容的提问来源于stack exchange，提问作者Bartr