user3467855 user3467855 - 10 months ago 65
CSS Question

Make rounded bottom corners in CSS

I am trying to make a CSS shape with a rounded bottom corner with

, but failing to understand how to:

.rounded-css {
border-radius: 5px;
display: block;
background: #669999;
width: 150px;
height: 200px;

<div class="rounded-css"></div>

Expected output:

enter image description here

Answer Source

You can use border-radius: 0 0 50% 50%; to make the whole bottom part round. With adding a white pseudo element ::after, you can "cut" the unwanted upper part to only show the curve:

.rounded {
  border-radius: 0 0 50% 50%;
  display: block;
  background: #669999;
  width: 100%;
  height: 70px;
  margin-top: -35px;
.rounded::after {
  content: "";
  display: block;
  width: inherit;
  height: 35px;
  background: white;
<div class="rounded"></div>