Inverted Scooped Corners Using CSS

Inverted Scooped corners using CSS

You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.

#box {  width: 200px;  height: 50px;  background-color: blue;  border-top-left-radius: 9999px;  border-bottom-left-radius: 9999px;  position: relative;  margin: 30px;}
#box::before,#box::after {  content: "";  width: 20px;  height: 20px;  right: 0;  position: absolute;}
#box::before {  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');  bottom: -20px;}
#box::after {  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');  top: -20px;}

<div id="box"></div>

How to add shadow to reverse c radial gradient only at the edges?

Since you are already using a radial-gradient to create the border corner scoop shape, all that is needed is to add an extra color-stop position in between to produce the shadow effect.

In the below snippet, we use the following gradient (for each corner):

radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px)

This gradient can be interpreted as follows:

The color of the radial gradient is rgba(204, 0, 0, 0) upto 100px radius from the center of the circle. The color is a transparent color and produces the effect of a reverse C cut (or a scoop).
From the 100px radius to 104px radius, the color gradually changes from rgba(204, 0, 0, 0) to #AAA (greyish color) and this produces a shadow like effect. You can change the color of the shadow by changing this color value.
Between 104px and 105px radius, color of the gradient changes from #AAA to #f7f6f6 which makes it look the color is changing smoothly instead of a hard-stop.

div {  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);  background-position: bottom left, bottom right, top right, top left;  background-size: 50% 50%;  background-repeat: no-repeat;  height: 300px;  width: 500px;}

<div></div>

Border corner shape scoop doesn't work

Using Radial Gradients:

Here is another alternative method to achieve the border corner scoop effect using radial gradients. In this method, we use multiple radial gradients and position them at the corners.

.border-scoop {  height: 300px;  width: 300px;  background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, steelblue 15%) no-repeat;  background: radial-gradient(circle at 0% 100%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, steelblue 15%) no-repeat;  background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;  background-size: 75% 75%;}body {  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);  background: linear-gradient(90deg, crimson, indianred, purple);}

<div class="border-scoop"></div>

CSS 3 Shape: Inverse Circle or Cut Out Circle

Update: CSS3 Radial Background Gradient Option

(For those browsers supporting it--tested in FF and Chrome--IE10, Safari should work too).

One "problem" with my original answer is those situations where one does not have a solid background that they are working against. This update creates the same effect allowing for a transparent "gap" between the circle and it's inverse cutout.

See example fiddle.

CSS

.inversePair {
    border: 1px solid black;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
    background: grey;
    z-index: 1;
}

#b {
    width: 200px;
    /* need to play with margin/padding adjustment
       based on your desired "gap" */
    padding-left: 30px;
    margin-left: -30px;
    /* real borders */
    border-left: none;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    /* the inverse circle "cut" */
    background-image: -moz-radial-gradient(
        -23px 50%, /* the -23px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        black 56px, /* start circle "border" */
        grey 57px /* end circle border and begin color of rest of background */
    );
    background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Original Answer

Took more effort than I expected to get the z-indexing to work (this seems to ignore the negative z-index), however, this gives a nice clean look (tested in IE9, FF, Chrome):

HTML

<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>

CSS

.inversePair {
    border: 1px solid black;
    background: grey;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
}

#a:before {
    content:' ';
    left: -6px;
    top: -6px;
    position: absolute;
    z-index: -1;
    width: 112px; /* 5px gap */
    height: 112px;
    border-radius: 56px;
    background-color: white;
} 

#b {
    width: 200px;
    z-index: -2;
    padding-left: 50px;
    margin-left: -55px;
    overflow: hidden;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#b:before {
    content:' ';
    left: -58px;
    top: -7px;
    position: absolute;
    width: 114px; /* 5px gap, 1px border */
    height: 114px;
    border-radius: 57px;
    background-color: black;
}

Inset border-radius with CSS3

The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.

Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).

outer curved layer for navbar in css

I believe you need here pseudo-elements coupled with shadows to create a nice illusion. To understand how it works I would recommend checking out this tutorial: https://itnext.io/how-to-make-a-fancy-inverted-border-radius-in-css-5db048a53f95

ul{
position: relative;
left: 0%;
top: 15%;
list-style-type: none;
margin: 0;
padding: 1;
width: 200;

}

li a{
    display: block;
    color: white;
    padding: 15px 45px;
    text-decoration: none;
    font-size: 30px;
    width: 182px;
    color: #64686d;
}
.current{
    color: white;
    background-color: #21252a;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    position: relative;
}

.current::before, .current::after{
  content: "";
  position: absolute;
  right: 0;  
  background-color: transparent;
  height: 40px;
  width: 20px;
}

.current::before{
  bottom: -40px;
  border-top-right-radius: 20px;
  box-shadow: 0 -25px 0 0 #21252a;
}
.current::after{
  top: -40px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 25px 0 0 #21252a;
}

.wrapper > div{
    background: #292d32;
    padding: 1em;
}
.wrapper > div:nth-child(odd){
    background: #292d32;
}

<ul>
      <li><a href="dashboard.html">Dashboard</a></li>
      <li><a href="Calendar.html" class="calendar current">Calendar</a></li>
      <li><a href="Graphs.html" class="graphs">Graphs</a></li>
      <li><a href="Add.html" class="add">Add</a></li>
      <li><a href="Settings.html" class="settings">Settings</a></li>
</ul>

Inverted Scooped Corners Using CSS