Creating concave corners in css

Question

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

Answer 1

Here is a good example of how I will do this:

http://jsfiddle.net/x4wLf/

HTML:

<div class='concave'> <div class='topleftconcave'></div> <div class='botleftconcave'></div> </div> 

CSS

  div.concave { background:blue; width:150px; height:120px; position:relative; } div.topleftconcave { position:absolute; background:white; width:25px; height:35px; border-bottom-right-radius:500px; } div.botleftconcave { position:absolute; background:white; width:25px; height:35px; bottom:0; left:0; border-top-right-radius:500px; } 

Answer 2

Lea Verou has a description of how to do this :

Using radial gradients, you can simulate rounded corners using a negative radius. You can do this without the support of any additional elements. This is a bit complicated.

It also reverts to solid color if CSS gradients are not supported. It will work on Firefox 3.6, the latest Webkit and, well, Opera 11.10 (they announced that support for gradients is coming). You can also add background -webkit-gradient() to make it work in almost all versions of Webkit that are currently used, but I warn you: it will not be easy, and I personally refuse to spend more than 5 minutes of my time messing with this non-standard thing.

Here is a living demonstration of their implementation.

Answer 3

If you don't want to add additional elements to the HTML, you only need to style two corners and use the generated content instead, I would suggest:

 .concave { position: relative; width: 10em; height: 3em; line-height: 3em; margin: 1em auto; padding: 0.5em; background-color: #00f; color: #fff; } .concave::before { content: ''; position: absolute; top: -1em; left: -1em; border: 1em solid #fff; border-radius: 1em; } .concave::after { content: ''; position: absolute; bottom: -1em; left: -1em; border: 1em solid #fff; border-radius: 1em; }​ 

JS Fiddle demo .

Answer 4

The only way I know is to add four divs in four corners, each with a positive border radius.

Answer 5

What about the CSS3 border-image property? Great article here:

http://css-tricks.com/understanding-border-image/

This does not mean supporting older browsers such as IE 7-8, but if you can live with it or find work, it will work well.

I recently made a used border image to do this for sure.