Create concave corners in css [duplicate]

Question

Is it possible to create concave corners like this in css? If yes, how would you do it?

Answer 1

Lea Verou has a description of how to do this:

By using radial gradients, you can simulate rounded corners with a negative radius. You can do this without the support of any extra elements. Its a little tricky.

It also falls back to a solid color background if CSS gradients are not supported. It will work on Firefox 3.6, latest Webkit and —hopefully— Opera 11.10 (they announced that gradients support is coming). You could add a -webkit-gradient() background too, to make it work in practically all versions of Webkit currently in use, but I warn you: It’s not going to be easy and I personally refuse to spend more than 5 minutes of my time messing with that non-standard thing.

Here is a live demo of their implementation.