How to Make an Inverted Border-Radius?

Question

I was testing the border-radius and a debt has arisen... Is there any way with CSS to reverse the radius of curvature of the border-radius?

This is the Shape format I’d like to get

But from the paperwork, it looks like border-radius does not accept negative values

.container {
    width: 300px;
    height: 160px;
    background-color: red;
    border-radius: -20px; /* não aceita valor negativo */
}
html {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, green, blue);
    background-repeat: no-repeat;
}

<div class="container"></div>

Then there was the question, how to achieve this shape in the corners only with CSS and continue viewing the image or the background color of background page?

OBS: I can’t use SVG or Clip-Path

Answer 1

Following the idea similar to Wallace’s, I found this link from Lea Verou:

• http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

The difference is that with this it is possible to apply transparency and so can change the background color easily.

In the example has rounded reverse edge and also corners in diagonal cut (chamfer).

Note that in the example both inside linear-gradient When radial-gradient has #fff, to change the element color change these #fff, and the same should be done in:

background: #fff; /* fallback */

/**
 * Beveled corners & negative border-radius with CSS gradients
 */

.bevel {    
	background: #fff; /* fallback */
	background:
		linear-gradient(135deg, transparent 10px, #fff 0) top left,
		linear-gradient(225deg, transparent 10px, #fff 0) top right,
		linear-gradient(315deg, transparent 10px, #fff 0) bottom right,
		linear-gradient(45deg,  transparent 10px, #fff 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}

.bevel.round {
	background-image:
		radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #fff 15px),
		radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #fff  15px),
		radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #fff 15px),
		radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #fff 15px);
}

/* esta parte a seguir é somente para testes */
html, body {
	height: 100%;
}

body {
    background: red;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    animation: cores-animadas 5s infinite;
}

.exemplo {
    width: 200px;
    margin: 15px auto;
    padding:13px 15px;
    color: #0c0c0c;
    line-height:1.5;
}

@keyframes cores-animadas
{
    0%   { background-color: red; }
    20%  { background-color: green; }
    40%  { background-color: blue; }
    60%  { background-color: violet; }
    80%  { background-color: orange; }
    100% { background-color: red; }
}

<div class="exemplo bevel">
   foo bar baz<br>foo bar baz<br>foo bar baz
</div>

<div class="exemplo bevel round">
   foo bar baz<br>foo bar baz<br>foo bar baz
</div>

Answer 2

Man, my humble suggestion would be to use a radial-gradient.

In this case, in each corner of a div daughter, would you use a radial-gradient with the same color you use in the parent container.

Thus:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}

<div class="container">
  <div class="internal-radius"></div>
</div>

Of course, when adding a text within the div who carries the radial-gradient, the text will be on top of the "ball" top. The solution I arranged was to put padding in div.internal-radius of the same value as radial-gradient, that is to say, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}

<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Observing: For the joy of being happy: it works on Internet Explorer 10.

Honestly, it’s not one of the best solutions, but CSS is still like this.

Answer 3

The solution I arrived at was similar to that of Mr. Wallace, but I used 4 Divs inside a container to have transparency in the corners.

Face one of the 4 Divs has a radial gradient with the center of the circle aligned at the corner going from transparent to background color.

To better understand follow the example based in that article.

html {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, red, blue);
    background-repeat: no-repeat;
}
.container {
    position: relative;
    width: 400px;
    height: 200px;
    margin: 3rem auto;
}

.tl, .tr, .br, .bl {
    width: 200px;
    height: 100px;
    /* background-color: #fff; */
    float: left;
}
.tl {
    background-image: radial-gradient(circle at 0 0,transparent 20px, green 20px);
}
.tr {
    background-image: radial-gradient(circle at 100% 0,transparent 20px, green 20px);
}
.bl {
    background-image: radial-gradient(circle at 0 100%,transparent 20px, green 20px);
}
.br {
    background-image: radial-gradient(circle at 100% 100%,transparent 20px, green 20px);
}
.container p {
    position: absolute;
    text-align: center;
    padding: 20px
}

<div class="container">
    <div class="tl"></div>
    <div class="tr"></div>
    <div class="bl"></div>
    <div class="br"></div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, dolores.</p>
</div>

Answer 4

Resolve, Border corner Shape the css box { background-color: #3498DB; border-corner-Shape: Scoop; border-Radius: 30px; and width: 200px; height: 200px; }