CSS border on transformed node

Question

I have a HTML node on which I set a very fat border and a transformation which scales and rotates via CSS. For some reason, after the transformation, on the outside of the border, a very slim additional border in the color of the node itself occurs on the outside, as if the background of the node extends below the border and the border is not quite large enough to cover the background color.

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

Notice how in the top box, it is not noticable that a border is set because its color is set to white, but in the bottom box, the white border is surrounded by another slim border in the color of the box.

Is there something to prevent this from happening?

Answer 1

You can adjust the background-clip property to avoid this. By default the value is set to border-box:

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
  background-clip:content-box; /*OR padding-box*/
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

With padding-box or content-box the background will not extend to the border.