csshtmlcss3pie

Rounded bottom border for div

enter image description hereI 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

Solution

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