Curved bottom corners facing outward, like in Office Ribbon tabs, using CSS

At work i am given a task to create a simple menu UI that resembels the Ribbon UI. It doesn't have to be that sophisticated or nice looking, but it needs to have a specific look that I don't know how to do.

I need to make the bottom of a selected tab round, but facing outwards, just like in Office. It was easy to make the top of a selected tab round using CSS3 (border-top-left-radius:4px and same for right), which is supported in all modern browsers (we don't need round corners on old browsers. Th开发者_开发知识库ey can easily upgrade if they want to :) ). But if I use border-bottom-left-radius:4px on a selected tab, it has the normal round bottom corner, facing inwards, not outwards (sorry for my bad english).

Can it be achieved somehow using CSS3?

If I understand correctly, than this is what you want: http://jsfiddle.net/U84ng/

This is faking a little, and gets more complex when your background is an image instead of solid color. But unless it's an image that changes horizontally (ie. not a gradient or pattern) and your tabs aren't flexible in width (depending on text width, rather than one fixed in css) it can be done.