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

7 votes265 views3 answers
Iframe no scroll
CSS
16 votes248 views3 answers
CSS Head Link
CSS
0 vote245 views2 answers
Html overflow scroll only if needed with exemple
CSS
-1 vote275 views1 answer
Change font size on large screen resolution bootstrap
CSS Bootstrap
2 votes286 views5 answers
How to reset postgres password
CSS
0 vote249 views1 answer
Roam research
CSS
3 votes296 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS Bootstrap
0 vote260 views1 answer
Scrollbar with 2 different colors on same page css
CSS
165 votes308 views6 answers
Box shadow inset
CSS
4 votes269 views1 answer
Png shadow css
CSS