Curve bottom of square css

.round-bottom { 
  border-bottom-left-radius: 50% 150px !important;
  border-bottom-right-radius: 50% 150px !important;
  position: relative;
  overflow: hidden;
  width: 160%; 
  margin-bottom:-50px;
  left:-30%; 
  background-color:#444;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a2/Tropical_Forest_with_Monkeys_A10893.jpg'); background-position: center center;
  background-size: 42% auto;
  height:150px;
}
.container { width: 100%; height: height:100px; padding-bottom:50px; overflow:hidden;}

<div class="container"><div class="round-bottom"></div></div>

Source: stackoverflow.com

Similar codes

1 vote320 views3 answers
Read more dots css
CSS
0 vote354 views3 answers
Bulma capitalized
CSS Bulma
17 votes299 views2 answers
Css grid center elements inside div
CSS
103 votes304 views2 answers
What are the types of positioning in css
CSS
0 vote352 views1 answer
Fixed div with scrollable content
CSS
0 vote275 views1 answer
Symfony modify request
CSS
0 vote275 views1 answer
Inine css
CSS
0 vote266 views1 answer
Css background image remove margin
CSS
126 votes301 views7 answers
Css box shadow
CSS
1 vote302 views2 answers
Rainbow text with css
CSS