styles.css

.box {
  padding: 1.25rem;
}

.round-top-left {
  border-top-left-radius: 100%; 
}

.round-top-right {
  border-top-right-radius: 100%; 
}

.round-bottom-right {
  border-bottom-right-radius: 100%; 
}

.round-bottom-left {
  border-bottom-left-radius: 100%; 
}

/* More specific to avoid collision with background-color */
div.empty {
  background-color: transparent;
  border-radius: 0; 
}

div.corner {
  background-color: transparent;
  padding: 0;
}

.corner.flat-top-left {
  border-bottom-width: 2.50rem;
  border-bottom-style: solid;

  border-left: 2.50rem solid transparent;
}

.corner.flat-top-right {
  border-bottom-width: 2.50rem;
  border-bottom-style: solid;

  border-right: 2.50rem solid transparent;
}

.corner.flat-bottom-right {
  border-top-width: 2.50rem;
  border-top-style: solid;

  border-right: 2.50rem solid transparent;
}

.corner.flat-bottom-left {
  border-top-width: 2.50rem;
  border-top-style: solid;

  border-left: 2.50rem solid transparent;
}

@media screen and (min-width: 30em) {
  .box {
    padding: 1.5rem;
  }

  .corner.flat-top-left {
    border-bottom-width: 3rem;
    border-bottom-style: solid;
  
    border-left: 3rem solid transparent;
  }
  
  .corner.flat-top-right {
    border-bottom-width: 3rem;
    border-bottom-style: solid;
  
    border-right: 3rem solid transparent;
  }
  
  .corner.flat-bottom-right {
    border-top-width: 3rem;
    border-top-style: solid;
  
    border-right: 3rem solid transparent;
  }
  
  .corner.flat-bottom-left {
    border-top-width: 3rem;
    border-top-style: solid;
  
    border-left: 3rem solid transparent;
  }
}