html - Invert Top Rounded Borders to Create Bowl Effect -

this question has answer here:

• how can create concave bottom border in css? 5 answers

i have div rounded corners invert these rounded corners create bowl effect.

here have:

html{    background:red;  }    #test {    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 150px;    border-top-left-radius: 50%;    border-top-right-radius: 50%;    background: blue;  }

<div id="test"></div>

so instead, like:

is possible css?

update

if not clear, 'red' meant illustrate rest of body of page , need transparent

change top bottom.

border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;

edit:

see fiddle then.