CSS rotated div border shows odd outline-CodePudding

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.

CodePudding user response：

That's an interesting one as it only appears with the rotate transformation. You can remove it using outline to paint over the thin line with a border which will also not affect the positioning of it as follows:

body {
  background-color: black;
}

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

<div></div>

CodePudding user response：

try like below, no need border, just simply use margin.

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

<div></div>