CODEWITHSUNDEEP
htmlcss
Costa Michailidis
Costa Michailidis

Reputation: 8178

How to get border-radius to produce an elliptical radius up top and square corners at the bottom

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!

Upvotes: 0

Views: 149

Answers (3)

Costa Michailidis
Costa Michailidis

Reputation: 8178

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

Upvotes: 0

ralph.m
ralph.m

Reputation: 14365

You could try this:

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

Upvotes: 1

crazymatt
crazymatt

Reputation: 3286

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;
  }

Upvotes: 0

Related Questions