Inset border-radius with CSS3

Question

Is there way to create inset border radius with css3? (Without images)

I need a border radius like this:

Answer 1

The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:

div.round {     background:         -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),         -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),         -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),         -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);     background:             -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),             -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),             -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),             -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);     background:             -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),             -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),             -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),             -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);     background-position: bottom left, bottom right, top right, top left;         -moz-background-size: 50% 50%;         -webkit-background-size: 50% 50%;     background-size: 50% 50%;     background-repeat: no-repeat; } 

The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.

Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).