css - Is a concave border radius possible?

Question

Here is a simple convex example.

http://jsfiddle.net/swY5k/

#test{
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}

However, I want a concave border radius.

I tried making the border-radius negative but this did not work.

Example of concave/convex:

Answer 1

With clever use of the :before and :after pseudo classes, we can simulate a concave form:

    #test{
        width: 100px;
        height: 300px;
        background: green;
        position: relative;
        display: inline-block;
    }
    
    #test:before{
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 0 60px 60px 0 / 0 300px 300px 0;
        display: inline-block;
        content: '';
    }
    
    #test:after{
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 60px 0 0 60px / 300px 0 0  300px;
        display: inline-block;
        content: '';
        position: relative;
        left: 40px;
    }

<div id="test"></div>