Using transform: scale and preserving border-radius

by Konstantin Rouda

HTML

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

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 5rem auto 0;
  border: 1px solid red;
}

.container::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: -1rem;
  top: 7rem;
  bottom: 1rem;
  background: firebrick;
  border-radius: calc(2rem / 0.3) / calc(2rem / 2);
  transform: scale(0.3, 2);
}