CSS rotated div border shows odd outline

Question

I'm trying rotate a div with a border. The border has the same color as the background. A very thin line appears between the border outline and the background. Here is my code below. I'm trying to get rid of the weird line.

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}

<div></div>

I tried multiple browsers.

I could fix this by using another div instead of a border, but I'm more interested in getting the border to work as expected.

Answer 1

A simple fix of this is by using backface-visibility: hidden.

When an element rotates, it seems that the rendering of transform: rotate() may cause the back face of it to be shown, as if in 3D perspective.

This possibly lead to the background-color of the back face (a mirror image the element's front face) overflowing the border edge in this case.

backface-visibility: hidden fix it by rendering the back face invisible, as shown in below example.

On side note, MDN did mention that backface-visibility has no effect on 2D transforms, which indicates that this behavior of transform: rotate() to have perspective is more accidental than expected.

Example:

body {
  background-color: black;
  display: flex;
  gap: 100px;
}
div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}
div + div {
  /* 👇  fixed here */
  backface-visibility: hidden;
}

<div></div>
<div></div>