Adding Transform CSS property to div modifies its border-radius-CodePudding

I have 2 div elements: a parent and its child, and need to have rounded corners on both of them. Setting border radius to for example 20 px usually does that, but once I add transform property to child specifically scaleX, border radius becomes smaller, and visually doesn't change even if I set its value to higher, here is the sample code:

<style>
.container {
  background-color: grey;
  height: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.item {
  background-color: red;
  transform-origin: 0 50%;
  transform: scaleX(0.5);
  border-radius: 20px;
  height: inherit;
}
</style>
<div >
  <div ></div>
</div>

and here's the codesandbox link of the following code:

CodePudding user response：

I believe the transform X is "squishing" the .item, and that's what you're seeing here. As an alternative, can you use width: 50% instead of transform: scaleX(0.5)? That will maintain the proper radius on .item

CodePudding user response：

I think your code so complicated.

You can use simply width instead transform, transform-origin.

Just set simply like this.

.item {
  background-color: red;
  width: 50%;
  border-radius: 20px;
  height: inherit;
}