Inset Border Radius with CSS

Question

I'd like to have the border-radius of the box inset.

I tried border-right-bottom-radius: -100px but it doesn't work

<div style="max-width: 850px; height: 850px; background-color: #FBF6E9; padding: 10px; border-right-bottom-radius: -100px;">
</div>

This is what I would like:

Answer 1

You can use a radial-gradient background on a pseduo element for this.

You have your main container which has the border, then you set a several radial-gradient circles on each corner of the pseudo ::before element.

You can set the radial-gradient on the main container, however, any content will overlay the top of the circles. Using a ::before with a higher z-index will "mask" any content in the container.

:root {
 --radius-size: 20px;
 --border-color: purple;
}

.container {
  height: 500px;
  background: transparent;
  border: 50px solid #FBF6E9;
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
}

.container::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
      radial-gradient(50px at top left, #FBF6E9 99%, transparent), 
      radial-gradient(50px at top right, #FBF6E9 99%, transparent), 
      radial-gradient(50px at bottom left, #FBF6E9 99%, transparent), 
      radial-gradient(50px at bottom right, #FBF6E9 99%, transparent);
  z-index: 10;
}


/* FOR FUN CODE */
.container-no-pseudo {
  margin-bottom: 50px;
  height: 500px;
  background: 
      radial-gradient(50px at top left, #FBF6E9 99%, transparent), 
      radial-gradient(50px at top right, #FBF6E9 99%, transparent), 
      radial-gradient(50px at bottom left, #FBF6E9 99%, transparent), 
      radial-gradient(50px at bottom right, #FBF6E9 99%, transparent);
  border: 50px solid #FBF6E9;
  position: relative;
  z-index: 1;
}


.container-vars {
  height: 500px;
  background: transparent;
  border: var(--radius-size) solid var(--border-color);
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
}


.container-vars::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
      radial-gradient(var(--radius-size) at top left, var(--border-color) 97%, transparent), 
      radial-gradient(var(--radius-size) at top right, var(--border-color) 97%, transparent), 
      radial-gradient(var(--radius-size) at bottom left, var(--border-color) 97%, transparent), 
      radial-gradient(var(--radius-size) at bottom right, var(--border-color) 97%, transparent);
  z-index: 10;
}

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


<div class="container">
<h1>To demonstrate the "mask" if content is in this box.</h1>

<h5>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam. Consequat luctus tempus.</h5>

Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.
</div>


<div class="container-no-pseudo">
<h1>To demonstrate if there is not a pseudo element and the "corners" are the background of th container. </h1>

<h5>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam. Consequat luctus tempus.</h5>

Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.
</div>



<div class="container-vars">
<h1>To demonstrate using CSS vars to change all border and circle radius sizes at once.</h1>

<h5>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam. Consequat luctus tempus.</h5>

Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.
</div>