Inset rounded edges with CSS

Question

Is it possible to do this kind of thing with CSS?

From my Googling, I can't find anything helpful.

Answer 1

It can be done with CSS3's radial gradients:

CSS:

div{
  background: 
    radial-gradient(
      circle at -40px 50px, 
      transparent 80px,
      red 80px
    );
    height: 100px;
    width: 100px;
}
body { background-color: blue; }

http://jsfiddle.net/7WHAz/2/

Answer 2

this may work... but just if a plain background color I'm afraid:

http://jsfiddle.net/7WHAz/

change the:

 div:before {        
    background-color:white; 
}

to the color your background use