Adding radius in center of div not corner CSS.

<style type="text/css">

body {
margin: 0;
}
.zone-wrapper{
background: #ddd888;
height:180px;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #33b5e5;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 1;
}
.seperator {
height: 50px;
background-color: black;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}

</style>

<div id="zone-user-wrapper" class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>


Output :)