Round the inner corners inside the box-shadow?

user_2642351 0
Viewed 241

How can I round the inner corners inside the box-shadow?

If I increase border-radius to 80px then I see some whitespace between the box-shadow and the corners.

div#secondSample {
  width: 100%;
  height: 500px;
}

div#secondSample div#grid div {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
  top: 10px;
  left: 10px;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF, inset 3px 3px 20px 10px #0000FF80;
}

div#secondSample div#grid div:after {
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid;
  box-shadow: inset 3px 3px 20px 10px green;
  border-image-slice: 1;
    border-image-source: linear-gradient(to left, darkgreen, lightgreen);
    color:#000;
    
}
<div id="secondSample">
  <div id="grid">
    <div></div>
  </div>
</div>

border css html
1 Answers

The issue is not box-shadow but gradient on border combined with radius. Based on this answer you can do it like below:

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF, inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after {
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  box-shadow: inset 3px 3px 20px 10px green;
}

div#grid div:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  border-radius: 80px;
  background: linear-gradient(to left, darkgreen, lightgreen);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
<div id="grid">
  <div></div>
</div>

And if you want only inner corner you can use a different mask based on this answer

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF, inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after{
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  box-shadow: inset 3px 3px 20px 10px green;
}


div#grid div:before {
  content:"";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  background: linear-gradient(to left, darkgreen, lightgreen);
  --r: 30px 30px content-box; /* control the radius here */
  -webkit-mask: 
     radial-gradient(farthest-side at bottom right,transparent 98%,#fff 100%) top left    / var(--r),
     radial-gradient(farthest-side at top    right,transparent 98%,#fff 100%) bottom left / var(--r),
     radial-gradient(farthest-side at bottom left ,transparent 98%,#fff 100%) top right   / var(--r),
     radial-gradient(farthest-side at top    left ,transparent 98%,#fff 100%) bottom right/ var(--r),
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask-repeat:no-repeat;
  mask-composite: exclude;
  
}
<div id="grid">
    <div></div>
  </div>

If you don't want transparency, simply like below:

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF, inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after{
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  background:#fff padding-box;
  box-shadow: inset 3px 3px 20px 10px green;
}


div#grid div:before {
  content:"";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  background: linear-gradient(to left, darkgreen, lightgreen);
  
}
<div id="grid">
    <div></div>
  </div>

user_86203330
Related