border-radius: 50% 50% 50% 50%/100% 100% 0% 0%
  • The First 4, 50% for setting border radius of each four corner to 50% of height/ width.
  • Second part is setting vertical radius and horizontal radius of each corner separately.
  • In above, top-left and top-right is set to full width and height of element.
  • This makes it a circle.
  • The second top values are 0 vertical radius and horizontal radius, flattening and creating straight edge at bottom.
  • puesdo element before can be considered like an empty div with content: "" property.