Scooped corners using radial-gradient and linear-gradient

by Konstantin Rouda

HTML

<div class="box">
  <h3 style="
    font-size: 2.5rem;
    margin: 1rem 0;
">This is title</h3>
  <p>This is the first paragraph with some text in ti</p>
  <p>This is the second paragraph with some text in it!!!!!!!!!!</p>
</div>

CSS

BODY {
  min-height: 100vh;
  background: azure;
  background-image: url(https://farm1.staticflickr.com/798/40381373534_ae61b918db_o.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.box {
  position: relative;
  box-sizing: border-box;
  width: 30rem;
  min-height: 20rem;
  margin: 5rem auto 0;
  padding: 2rem;
  --rad-col: #0000ff;
  --lin-col: blanchedalmond;
  text-align: center;
  color: #f1f1f1;
  background-color: #0000ff00;
  /*background-image: radial-gradient(circle at 0px 0px, #ff000000 10%, var(--rad-col) 0, var(--rad-col) 46%, transparent 0), radial-gradient(circle at 100% 0%, #ff000000 10%, var(--rad-col) 0, var(--rad-col) 46%, transparent 0), radial-gradient(circle at 0% 100%, #ff000000 10%, var(--rad-col) 0, var(--rad-col) 46%, transparent 0), radial-gradient(circle at 100% 100%, #ff000000 10%, var(--rad-col) 0, var(--rad-col) 45%, transparent 0), linear-gradient(to right, transparent 40%, var(--rad-col) 0, var(--rad-col) 70%, transparent 0);*/
  /* background-image: radial-gradient(circle at 0% 0%, #ff000000 10%, #0000ffb5 0); */
  /* background-image: linear-gradient(to right, transparent 40%, red 0, red 70%, transparent 0); */
  
  /*first approach*/
  /*
    background-image: radial-gradient(circle at 0px 0px, transparent 10%, var(--rad-col) 0), radial-gradient(circle at 100% 0%, transparent 10%, var(--rad-col) 0), radial-gradient(circle at 0% 100%, transparent 10%, var(--rad-col) 0), radial-gradient(circle at 100% 100%, transparent 10%, var(--rad-col) 0);
    background-position: top left, top right, bottom right, bottom left;
    */
    
  /*second approach*/
  background: radial-gradient(circle at top left, transparent 10%, red 0), radial-gradient(circle at top right, transparent 10%, var(--rad-col) 0), radial-gradient(circle at bottom right, transparent 10%, var(--rad-col) 0), radial-gradient(circle at bottom left, transparent 10%, var(--rad-col) 0);
  background-position: top left, top right, bottom right, bottom left;
 ...