Is it possible to have a non-rectangular div?

Question

I need to shape ONE div tag in the following shape:

Is it possible to make it cross browser? I don\'t necessarily need rounded

Answer 1

Definitely requires two or three div's unless you use a background image

Here's a three-div solution

http://jsfiddle.net/pxfunc/SUuF6/

Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support

HTML:

    
<div>
    

CSS:

#fancyShape {position:relative;width:504px;height:304px;}

#main {
    margin-left:100px;
    width:400px;
    height:300px;
    border:solid 2px #000;
    border-radius:0 15px 15px 15px;

}
#panHandle {
    width:100px;
    height:120px;
    position:absolute;
    top:0;left:0;
    border-top:solid 2px #000;
    border-left:solid 2px #000;
    border-bottom:solid 2px #000;
    border-radius:15px 0 0 15px;
}

/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}