<div class = "wrapper">
  <div>
    <h2>Default</h2>
    <div class="shapes">
      <div class = "default"></div>
    </div>
  </div>
  <div>
    <h2>Shapes with border-radius</h2>
    <div class="shapes">
      <div class = "example1"></div>
      <div class = "example2"></div>
      <div class = "example3"></div>
    </div>
  </div>
</div>

.wrapper{
  margin: 40px auto;
  max-width: 60em;
  font-family: Tahoma,sans-serif; 
}
.wrapper,
.shapes{
  display: flex;
  justify-content: space-around;
}
.wrapper>div{
  display: flex;
  flex-direction: column;
}
.shapes>div{
  width: 100px;
  height: 100px;
  background:orange;
  margin-right: 4px;
}
.example1{
  border-radius: 50%;
}
.example2{
  border-radius: 20px 25% 50% 12px;
}
.example3{
  border-radius: 69% 31% 28% 72% / 58% 55% 45% 42%; 
}