Create concave corners in css

Question

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

Yes, but you have to use several extra elements. – Korvin Szanto Sep 16 '12 at 14:52 — Korvin Szanto, Sep 16 '12 at 14:52

score 10 · Answer 1 · edited Sep 17 '12 at 14:27

10

Lea Verou has a description of how to do this:

By using radial gradients, you can simulate rounded corners with a negative radius. You can do this without the support of any extra elements. Its a little tricky.

It also falls back to a solid color background if CSS gradients are not supported. It will work on Firefox 3.6, latest Webkit and —hopefully— Opera 11.10 (they announced that gradients support is coming). You could add a -webkit-gradient() background too, to make it work in practically all versions of Webkit currently in use, but I warn you: It’s not going to be easy and I personally refuse to spend more than 5 minutes of my time messing with that non-standard thing.

Here is a live demo of their implementation.

edited Sep 17 '12 at 14:27

Brad Larson

170,088
45
397
571

answered Sep 16 '12 at 15:05

Alfred

21,058
61
167
249

Wow! This actually allows us to use only one div and to have a background image. This is perfect. – Mick Sep 16 '12 at 15:11
Thanks @Patt :) , I think this is the better way to do this. This creates less headache than others. Consider giving this a +1. – Alfred Sep 16 '12 at 15:15
Indeed, it does look aliased in Safari. Could you explain this: `don't put the color stops at the exact same position`. Can this code work well in Safari and IE? – Mick Sep 16 '12 at 15:17
This post is originally from Lea Berrou. Here is the [link](http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/). Please, don't forget to give the source. – Mick Sep 16 '12 at 15:49
@Patt - Thanks for pointing this out. I've edited the answer to provide proper credit to Lea for this. – Brad Larson Sep 17 '12 at 14:27

score 7 · Accepted Answer · edited Oct 02 '14 at 17:14

7

Here is a good example of how I would tackle 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;
}

edited Oct 02 '14 at 17:14

JTG

8,587
6
31
38

answered Sep 16 '12 at 14:56

Korvin Szanto

4,531
4
19
49

That was quick @Korvin. Well done! This is beautiful and this is exactly what I am after! – Mick Sep 16 '12 at 14:57
This option creates extra elements. Actually it can be solved without adding any extra elements. – Alfred Sep 16 '12 at 15:10
1

Technically no it can't. The ::before and ::after method is limited to two concave corners as I mentioned in David Thomas's example, that's why I chose adding elements. – Korvin Szanto Sep 16 '12 at 15:12
Maybe there is a little disadvantage with this but I am not sure this is possible to avoid it. If there is an image in the background, we will see the corner in a different color right? – Mick Sep 16 '12 at 15:20

score 2 · Answer 3 · answered Sep 16 '12 at 14:58

2

If you'd rather not add extra elements to the HTML, need to style only two corners and are able to use generated content instead, I'd 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.

answered Sep 16 '12 at 14:58

David Thomas

249,100
51
377
410

I was going to go this route, but this unfortunately doesn't allow for all four corners, only two. – Korvin Szanto Sep 16 '12 at 14:59
There is that slight problem, yes. – David Thomas Sep 16 '12 at 15:00
Thanks @David. This is an awesome code. – Mick Sep 16 '12 at 15:02
@Patt: you're very welcome, I'm glad to have been of help! It is, unfortunately, rather limited though. =) – David Thomas Sep 16 '12 at 15:03

score 0 · Answer 4 · answered Sep 16 '12 at 14:55

0

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

answered Sep 16 '12 at 14:55

jazmit

5,170
1
29
36

score 0 · Answer 5 · answered Sep 16 '12 at 15:38

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

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

It will mean no support for older browsers such as IE 7-8, but if you can live with that or find a work around this would work well.

I recently done used border-image myself to do this exact thing.

Create concave corners in css

5 Answers5

Linked