Inset border-radius shape in CSS?

Question

Is there a way I can make this shape image in CSS ? CSS3 is fine, no need for IE compatibility .The gradient part of it is not important, it's that curve on the bottom right that I can't see how to do. I've seen various jQuery corner plugins but nothing that'll work for me so far. I can't use a background image as the content in this will be of variable length.

Edit: Thanks for the replies, very impressive! One thing though - in the image itself, there's a blue background AND a seamless grey border round the whole thing including the curve on the right. Maybe it's impossible to keep this border if the solution involves border-radius 'hacks' on extra elements, but if this can be kept too it would be nicer.

Answer 1

I have created a little something. There is probably a better solution, but maybe this helps.

jsFiddle

CSS:

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML:

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>