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

Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/

It's essentially using three divs to aggregate the mouse events, like so:

And I use a :hover rule on the outer element to affect the border colors on the inner divs:

#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}

The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.