problem with linear background and border color-CodePudding

What is the reason for the defect in which the background color is superimposed on the border in top side and in 1 case goes beyond in bottom side?

  .scaledSquare{
  position: absolute;
  left: 50px;
  top: 50px;
  height: 97px;
  width: 97px;
  border: none;
  background: linear-gradient(315deg, #2D8FDF 75%, #2D8FDF12 76%, #2D8FDF12 100%);
  border-radius: 12px;
  border: 1px solid #FFFFFF12;
  box-sizing: border-box;
  transform: rotate(45deg);

  }
  
  .scaledSquare1{
    left: 190px;
    top: 190px;
    background: linear-gradient(315deg, #2D8FDF 45%, #2D8FDF12 45%, #2D8FDF12 100%);

  }

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

CodePudding user response：

The reason you are getting the clipping artefacts is most likely due to your background being smaller than the border box. Setting the background-origin to border-box on both elements should fix the issue.