Invert Rounded Corner in Css

How to use inverted border-radius?

Just use before and add an element to style

div {
  position: relative;
  display: inline-block;
  background-color: blue;
  width: 10em;
  height: 10em;
}

div::before{
  display: block;
  position: relative;
  content: '';
  width: 10%;
  top: 15%;
  height: 70%;
  background-color: white;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

<div></div>

CSS3 Inverted Rounded Corner

Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see:

Our mark-up:

<div id="bubble">
    <p>This is madness!</p>
</div>

Our CSS:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

The result:
http://jsfiddle.net/MrLWY/

I have only tested this in Firefox 3.6.3, but the idea is clear :-)

Here is take two:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

And the result: http://jsfiddle.net/ajeN7/

Perhaps this can be enhanced in many ways:

make it cross-browser (+webkit and opera, at least)
it could work in IEs, without roundings, though, with help of something like that http://code.google.com/p/ie7-js/ (in order for generated content to work).
to find out how it could work with flexible height.
to change the font-family declaration :-)

How to make inverted rounded corners and bend content to follow curved container

You should post also complete code, it is not always enough with CSS. (Enlico already commented this to you).

Anyway, a posible solution would be this, moving the elements in a vertical amount to make them rotate:

.container {
    width: 100%;
    position: relative;
    top: 200px;
}

.element {
    position: absolute;
    background-color: tomato;
    left: 50%;
    transform: translateY(-400px) rotate(var(--angle)) translateY(400px) rotate(calc(-1 * var(--angle)));
}

.element:nth-child(1) {
    --angle: 50deg;
}

.element:nth-child(2) {
    --angle: 30deg;
}

.element:nth-child(3) {
    --angle: 10deg;
}

.element:nth-child(4) {
    --angle: -10deg;
}

.element:nth-child(5) {
    --angle: -30deg;
}

.element:nth-child(6) {
    --angle: -50deg;
}

<div class="container">
    <div class="element">item 1</div>
    <div class="element">item 2</div>
    <div class="element">item 3</div>
    <div class="element">item 4</div>
    <div class="element">item 5</div>
    <div class="element">item 6</div>
</div>

'Inverted' border-radius possible?

Not using the native border-radius. As mentioned on MDN "Negative values are invalid". You could definitely look for a library out there which does this for you automatically (though I find the approach taken in Philip's suggested library to be particularly outdated).

Using pure CSS I have come up with an approach. The idea is to add 4 extra elements inside your container, set their background to the same color as your page background (so this will not let page content underneath filter through – for that, you’d need SVG masking or similar), and to position them in such a way that they lie just outside of the element itself. We then apply a border-radius which gives the affect:

#main {    margin: 40px;    height: 100px;    background-color: #004C80;    position: relative;    overflow: hidden;}
#main div {    position: absolute;    width: 20px;    height: 20px;    border-radius: 100%;    background-color: #FFF;}
.top { top: -10px; }.bottom { bottom: -10px; }.left { left: -10px; }.right { right: -10px; }

<div id="main">    <div class="top left"></div>    <div class="top right"></div>    <div class="bottom left"></div>    <div class="bottom right"></div></div>

CSS - Inverted border radius to draw a rounded corner

You can use pseudoelements to created rounded fragments and "clipped" borders.

.flex {  display: flex;  flex-direction: column;  align-items: flex-end;}
.flex > * {  height: 50px;  position: relative;  display: flex;  align-items: center;}
.flex > *:before {  content: "";  position: absolute;  display: inline-block;  top: 10px;  bottom: 0px;  left: -90px;  width: 90px;  border-right: 2px solid red;  border-bottom: 2px solid red;  border-bottom-right-radius: 10px;}
.flex > *:after {  content: "";  position: absolute;  display: inline-block;  top: -2px;  height: 10px;  left: 0px;  width: 10px;  border-left: 2px solid red;  border-top: 2px solid red;  border-top-left-radius: 10px;}
.flex > .one {  width: 100px;}
.flex > .two {  width: 200px;}
.flex > .three {  width: 300px;}
.flex > .four {  width: 400px;}
.degrees {  /* circle styles */  width: 30px;  height: 30px;  border-radius: 50%;  border: 1px solid red;    /* styles for centering */  display: flex;  align-items: center;  justify-content: center;  margin-left: 15px;}

<div class="flex">   <div class="one">     <div class="degrees">1°</div>   </div>   <div class="two">     <div class="degrees">2°</div>   </div>   <div class="three">     <div class="degrees">3°</div>   </div>   <div class="four">     <div class="degrees">4°</div>   </div></div>

CSS negative triangle with inverted rounded corner

Yes, it is possible to achieve this effect by using two pseudo-elements. We need to position one of the pseudo-elements with respect to the left of the container while other is positioned with respect to right of the container. Then by adding a transform: skew() on them in opposite directions and assigning a border-radius to the required sides we can get the required output.

div {  position: relative;  height: 50px;  width: 100%;  padding-top: 50px;  background: blue;  background-clip: content-box;  /* make sure blue background doesn't appear behind triangle */  overflow: hidden;  color: white;}div:before,div:after {  position: absolute;  content: '';  top: 0;  width: calc(50% + 10px);  /* don't change */  height: 50px;  /* must be equal to padding-top */  background: blue;}div:before {  left: 0;  transform: skew(45deg);  transform-origin: right bottom;  border-top-right-radius: 12px;}div:after {  right: 0;  transform: skew(-45deg);  transform-origin: left bottom;  border-top-left-radius: 12px;}

<div class='shape'>This is a shape.</div>

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>