<div><code>corner-shape: round</code> (the default value)</div>
<div><code>corner-shape: scoop</code> (rounded but inverted)</div>
<div><code>corner-shape: bevel</code> (snipped/<em>not</em> rounded)</div>
<div><code>corner-shape: notch</code> (snipped twice)</div>
<div><code>corner-shape: squircle</code> (a circley square)</div>

div {
  border-radius: 16px;

  &:nth-child(1) {
    corner-shape: round;
  }

  &:nth-child(2) {
    corner-shape: scoop;
  }

  &:nth-child(3) {
    corner-shape: bevel;
  }

  &:nth-child(4) {
    corner-shape: notch;
  }

  &:nth-child(5) {
    corner-shape: squircle;
  }
}

/* Ignore */
body {
  display: grid;
  gap: 0.5rem;
  div {
    width: fit-content;
    padding: 1rem;
    font: 900 1rem system-ui;
    color: white;
    background: hsl(270 100% 50%);
    code {
      background: black;
    }
  }
}