Border-radius and overflow hidden with child background

Question

I've got a problem with border-radius on wrapper that contains an overflow hidden.

I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).

#wrapper {
  background: blue;
  border: 2px solid pink;
  border-radius: 12px;
  height: 90px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
#wrapper::before {
  background: pink;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}

<div id="wrapper"></div>

With this example, we can see an unwanted blue pixel on the top and bottom left corner.

The pseudo element must be in position absolute to apply animation. I removed the animation for the example.

How can I fix this?

Answer 1

A fix is here. Apply overflow:hidden an width:300px to the outer div #container.

#container {
  width: 300px;
  overflow: hidden;
  border-radius: 12px;
}

#wrapper {
  height: 90px;
  background: blue;
  border-radius: 12px;
  position: relative;
  box-sizing: border-box;
  border: 2px solid pink;
}

#wrapper::before {
  background: pink;
  content: '';
  display: block;
  height: 100%;
  right: -30px;
  position: absolute;
  top: 0;
  width: 30px;
  border-radius: 50%;
  transition: transform 0.3s;
}

#wrapper:hover::before {
  transform: scale3D(10, 10, 1);
}

<div id="container">
  <div id="wrapper"></div>
</div>