Search code examples
csscurves

Inset rounded edges with CSS

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

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

Solution

  • It can be done with CSS3's radial gradients:

    enter image description here

    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/