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

0 vote129 views1 answer
Download-a-file-in-laravel-using-a-url-to-external-resource
CSS
9 votes121 views2 answers
Flex float
CSS
2 votes139 views1 answer
Bootstrap 5 auto darkmode 5
CSS Bootstrap
0 vote115 views1 answer
How to manage overflowing text in button
CSS
0 vote122 views2 answers
Mat-select-panel-wrap change position
CSS
0 vote163 views1 answer
Css custom easing
CSS
0 vote108 views1 answer
Overriding fullpage js anchor style
CSS
0 vote114 views1 answer
Responsive typography
CSS
1 vote118 views1 answer
Elementor is swiping
CSS
6 votes72 views1 answer
Jqeury css edit
CSS