How to create a colored domed background in CSS

Question

Currently my site looks like this when I apply the border-radius property to the color div:

But I want it to look like this:

I know that setting border-radius is not enough, any idea how I can achieve the above ??

PS: Using the image background in my case is not possible

Answer 1

The dome requires a negative left and right edge, and the border radius must be embedded. This should do the trick. Wrapping in overflow: hidden container prevents horizontal scrollbar.

 .dome { margin: 10% -25% 0; border-top-left-radius: 100%; border-top-right-radius: 100%; padding-bottom: 50%; } .gradientbg { /* gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff*/ background: rgb(129,186,221); background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%); background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%); background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 ); } .container { overflow: hidden; } 

 <div class="container"> <div class="dome gradientbg"></div> </div> 

Answer 2

The only thing you need to achieve this effect is the% radius in the upper left and upper right corners, which you can achieve with separate border-top-left-radius:100% and border-top-right-radius:100% declarations border-top-right-radius:100% or with a merged border-radius:100% 100% 0 0 declaration border-radius:100% 100% 0 0 where the first "100%" refers to the upper left edge, the second "100%" refers to the upper right, then 0s have a lower right and finally a lower left.

 div { margin: 10% 0 0; padding-bottom: 100px; border-radius: 100% 100% 0 0; // gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff background: rgb(129,186,221); background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%); background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%); background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 ); } 

 <div></div> 

Answer 3

Some code like this may provide a way for your problem:

 <div style="width: 300px;height: 300px;overflow: hidden;border: 1px solid #d5d5d5;"> <div style="background: #99A6E7; width: 700px; height: 700px; border-radius: 50%;position: relative;margin-left: -200px;margin-top: 150px;"> </div> </div>