CSS: How are the round corners of the box inside?

Question

There is a property border-radiusfor the rounded corners of a rectangle. But how to combine the angles inside the block, for example, subtract the circle?

Like here: http://malsup.com/jquery/corner/

Curl Settings

Answer 1

This can be done by adding four circular “gradient” background images on top of the regular background image, each of which is located in the corresponding corner. Here is an example on the Lea Verou blog . From this I extracted a JSFiddle ; key code -

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

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 14px;
}

Answer 2

, CSS, . JavaScript jQuery.

, jQuery - , , , - , CSS3 , , .

Answer 3

There is one way to do this using pure CSS:

CSS code:

div {
height: 200px;
background: red;
position: relative;
width:200px;
}

div:after {
content: '';
position: absolute;
top: -20px; right: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}
div:before {
content: '';
position: absolute;
top: -20px; left: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}

HTML: <div></div>

Here is an example: