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

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:
image

Can anyone help with what I have wrong?

Thanks

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?

1 Like

Here’s a responsive version although a little more complex :slight_smile:

(It could probably be simplified a little)

3 Likes

Thank you @PaulOB , that worked fantastically :slight_smile:

@Erik_J The div was 50% width

Thanks for all your help on this :slight_smile:

1 Like

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

2 Likes

Thanks @coothead :slight_smile: