Rounded corner cutout with CSS

by Pedro Pinto

HTML

<div class="card">
  <h1>No sharp corners in here!</h1>
  <p>Sit amet consectetur adipisicing elit. Distinctio consequatur qui eaque laboriosam odit, quidem, aperiam optio beatae assumenda saepe ut tempore facilis voluptas recusandae repudiandae modi nostrum numquam voluptatibus illo autem id repellat eveniet? Aspernatur accusantium ducimus optio placeat.</p>

  <div class="card__corner">
    <div class="card__corner-tr"></div>
    <div class="card__corner-bl"></div>
    <div class="card__corner-br"></div>
  </div>
</div>

SCSS

body,html {   height: 100%;  width: 100%; margin: 0; padding: 0; font-family: sans-serif; }
body { display: flex; align-items: center; justify-content: center; padding: 3rem; box-sizing: border-box; background-color: #FAFAFA; color: #11141b; }
h1 { letter-spacing: -0.01em; margin-top: 0; z-index: 1; position: relative; }
p { line-height: 1.4; margin-bottom: 0; }

.card {
  padding: 5rem;
  border: 1px solid lightgray;
  border-radius: 24px;
  box-shadow: 0 0px 8px rgba(0,0,0,0.1);
  position: relative;
  background-color: white;
  max-width: 420px;
}

.card__corner {
  position: absolute;
  width: 128px;
  height: 128px;
  top: -32px;
  left: -32px;
  border-radius: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;

  // The actual cutout
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
    top: 0;
    left: 0;
  }
}

// Top right corner
.card__corner-tr {
  position: absolute;
  top: 31px;
  right: -24px;
  width: 48px;
  height: 100%;
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 24px 0 0 0;
  box-shadow: 0 0px 8px rgba(0,0,0,0.1);
}

// Bottom left corner
.card__corner-bl {
  position: absolute;
  bottom: -24px;
  left: 31px;
  width: 100%;
  height: 48px;
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 24px 0 0 0;
  box-shadow: 0 0px 8px rgba(0,0,0,0.1);

}

// Bottom right corner
.card__corner-br {
  position: absolute;
  width: 48px;
  height: 48px;
  right: 25px;
  bottom: 25px;
  border-radius: 0 0 24px 0;
  box-shadow: 24px 24px 0 24px white, inset -1px -1px 0 0 lightgray;
}