Rounded border on top left and right of div so it it totally round?

[toolman]

Hi there,

I am trying to create two divs that have a total rounded top and a straight bottom, like this:

I cannot seem to get the border-radius to become totally rounded.

This is what I have tried:

.box{
background: #0e1b40;
-webkit-border-top-left-radius: 1000px;
-webkit-border-top-right-radius: 1000px;
-moz-border-radius-topleft: 1000px;
-moz-border-radius-topright: 1000px;
border-top-left-radius: 1000px;
border-top-right-radius: 1000px;
}

I have also tried:

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

but that is just creating this effect:

Can anyone help with what I have wrong?

Thanks

[Erik_J]

@toolman

I cannot seem to get the border-radius to become totally rounded.

If the “box” div has a fixed width and height the border radius would be half the width to get the total rounding. E.g:

.box{
  border-top-left-radius:200px;
  border-top-right-radius:200px;
  width:400px;
  height:700px;
  background: #0e1b40;
}

What dimensions does the div have, or is it fluid?

[PaulOB]

Here’s a responsive version although a little more complex

(It could probably be simplified a little)

[toolman]

Thank you @PaulOB , that worked fantastically

@Erik_J The div was 50% width

Thanks for all your help on this

[coothead]

Hi there toolman,

here is my attempt at a solution…

https://codepen.io/coothead/full/jOPvYww

…and the code…

https://codepen.io/coothead/pen/jOPvYww

coothead

[toolman]

Thanks @coothead