After applying a transformation that scales and rotates a HTML node through CSS, I noticed an unexpected issue. A thin additional border in the same color as the node itself appeared outside of the main fat border. It seems like the background extends beyond the border, causing this slim border to show. Is there a way to fix this?
.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>In the example provided above, you can see the difference between a proper border setup and the issue with the additional slim border. The top box has a white border making it less noticeable, while the bottom box reveals the problem with the extra border.
Is there a solution to prevent this strange occurrence from happening?