CSS corner-block-end-shape Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic layout */
.cards {
  display: flex;
  gap: 20px;
  padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Card visual */
.card {
  width: 260px;
  min-height: 160px;
  padding: 18px;
  color: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  /* logical corner shape applied to the block-end corner (depends on writing-mode) */
  corner-block-end-shape: bevel;
  /* shape-outside / clip-path are separate properties; corner-* is a logical corner-shaping property */
}

/* Vertical example uses a different shape and different writing mode */
.card.vertical {
  writing-mode: vertical-rl;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  corner-block-end-shape: scoop;
}

/* Typographic */
.card h2 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
}
.card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}
</style></head><body><div class="cards">
  <section class="card example-1">
    <h2>Horizontal (default)</h2>
    <p>This card uses corner-block-end-shape: circle(...). The block-end corner (depends on writing mode) is shaped.</p>
  </section>

  <section class="card example-2 vertical">
    <h2>Vertical (writing-mode)</h2>
    <p>Writing mode is vertical-rl; block-end corner becomes a different logical corner. This uses ellipse(...).</p>
  </section>
</div></body></html>