Adding Transform CSS property to div modifies its border-radius

Question

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 20px 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:

.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;
}

<div class="container">
  <div class="item"></div>
</div>

and here's the codesandbox link of the following code: https://codesandbox.io/s/silent-worker-nt7i0v?file=/src/styles.css

and the image of the behavior: Note how border radius of the child looks different than that of the parent, even though they have the same value set for it.

Answer 1

You can definitely use width here, and you can definitely animate it too. Here's a quick example:

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

.item {
  background-color: red;
  width: 0%;
  border-radius: 20px;
  height: inherit;
  animation: fill 5s infinite;
}

@keyframes fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

<div class="container">
  <div class="item"></div>
</div>