Rounded bottom border for div

Question

I am trying to round in the bottom border of a div. Is it possible to do with css? I know you can round in corners with:

border-bottom-left-radius: 50px;

I guess I am trying to achieve the inverse of this.

Any help would greatly be appreciated.

Thanks

Answer 1

Sure it's "possible". Overlay divs.

http://jsfiddle.net/jprGx/3/

.outer {
    width: 50px; 
    height: 50px;
    position: relative;
    border: #000 1px solid;
}

.inner {
    position:absolute;
    background: #fff;
    height: 20px;
    width: 50px;
    bottom: -1px;
    left: -1px;
    border-left: #000 1px solid;
    border-top: #000 1px solid;
    border-right: #000 1px solid;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

Answer 2

.round{
   border-radius: 0px 0px -50px -50px;
}

Answer 3

A more simple and easier way to do this would to implicitly code by:

    .round{
    border-radius: 0px 0px 50px 50px;
    }

Border-radius: 0px (top left corner) 0px (top right corner) 50px (bottom left corner) 50px (bottom right corner)