Reverse border-radius

Question

I want the opposite border radius, so that the smiley will be sad.

div.smile {
    width: 200px;
    height: 70px;
    border: 10px solid #222;
    border-top: 0;
    background: rgba(0,0,0,0);
    -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
    -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 50px;
    left: 38px;
    box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    }

Here is the fiddle link:

http://jsfiddle.net/mayoung/2qBLF/

Answer 1

An easy way - without having to modify the border radius properties - just rotate it 180 degrees:

-webkit-transform: rotate(180deg);

jsFiddle demo - looks exactly how you want it to.

---

Alternatively, you could just reverse the border-radius..

jsFiddle demonstrating that..

border-radius: 120px 120px 0 0 / 90px 90px 0 0;

You would also need to remove border-top: 0; , and set border-bottom:0 .

Answer 2

You mean turn the radii outwards? You can't do that. Just reverse the radii and use top border instead of the bottom border.