how to make inside border-radius in css?

Question

How can I make the border radius towards inside?

.circle {
   width:100px;
   height:100px;
   background-color:solid red;
   border-radius:-50px 50px -50px [ent         


        

Answer 1

Maybe with some radial-gradient:

body {
 background:linear-gradient(pink,yellow);
 height:100vh;
 margin:0;
}

.box {
  width:150px;
  height:150px;
  margin:10px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  bottom:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at top left,transparent 44%, red 44.5%);
}
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at bottom left,transparent 44%, red 44.5%);
}

<div class="box">
</div>

Answer 2

SVG

You should not use css to create complex shapes.
Use SVG instead.

Shape created with a SVG Path
In addition to 3 curves in the path

Highlighted each curve so you can see how to create the final shape.

<svg viewBox="0 0 100 100" width="200">
  <path d="M50 10 C 100 10, 100 90, 50 90" stroke="green" fill="transparent"/><!--Large curve-->
  <path d="M50 90 C 50 65, 35 50, 10 50" stroke="red" fill="transparent"/><!--Smaller down curve-->
  <path d="M10 50 C 35 50, 50 35, 50 10" stroke="blue" fill="transparent"/><!--Smaller up curve-->
</svg>

<svg viewBox="0 0 100 100" width="200">
  <path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" stroke="gray" fill="red"/>
</svg>