Shapes with Rectangle

<style>
* { box-sizing: border-box; }
.shape{
  height: 100px;
  width: 200px;
  max-width:100%;
  background-color:#5ffcc4;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  border: 5px solid white;
}
</style>
<div class="shape"></div>
Below we are using 50px (height/2 of rectangle) & 100px (height of rectangle) because, the rectangle height is 100px in here

.shape {
  border-radius: 0;
}
.shape {
  border-radius: 15px;
}
.shape {
  border-radius: 20%;
}
.shape {
  border-radius: 50%;
}
.shape {
  border-radius: 50px;
}
.shape {
  border-radius: 50px 50px 0 0;
}
.shape {
  border-radius: 100px 0;
}
.shape {
  border-radius: 50px 0;
}
.shape {
  border-radius: 50px 50px 0;
}
.shape {
  border-radius: 50px 0 0;
}
.shape {
  border-radius: 100px 100px 0 0;
}
.shape {
  border-radius: 0 0 100px 100px ;
}
.shape {
  border-radius: 100px 50px;
}
.shape {
  border-radius: 50px 100px;
}
.shape {
  transform: scale(0.5,1);
}
.shape {
  transform: skew(18deg);
}
.shape {
  border-radius: 100px 50px/50px 100px;
}
receipt
settings_ethernet