如何获得边界半径以在顶部和底部的角上产生椭圆半径

Question

I'd like a CSS div with an arched top and a square (or slightly rounded corners) bottom.

Here's my CSS:

  #oval {
    width: 200px;
    height: 500px;
    background: red;
    border-radius: 80px/20px 5px;
  }

I also tried 80px/20px 80px/20px 5px 5px with no luck, and a bunch of other combinations. I've been testing in Firefox.

Any help would rock!

Answer 1

您可以尝试以下方法：

border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;

Answer 2

Try building out each corner separately like this

  .oval {
    width: 200px;
    height: 500px;
    background: red;

border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;

    //border-radius: 80px/20px 5px;
  }

Answer 3

Okay, here's the rule: border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;

Apparently, you specify all the horizontal radii for four corners, then all the vertical radii