user3467855 user3467855 - 1 month ago 6
CSS Question

Make rounded bottom corners in CSS

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

border-radius
, 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

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>