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%);
}