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

<!DOCTYPE html><html><head><style type="text/css">/* Layout and base styles */
.demo {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 32px;
  background: #f7f7fb;
  min-height: 100vh;
  box-sizing: border-box;
}

h2 {
  margin: 0 0 18px 0;
  font-size: 18px;
  color: #0f172a;
}

.cards {
  display: flex;
  gap: 24px;
  align-items: center;
}

.card {
  width: 220px;
  height: 160px;
  display: flex;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  overflow: visible; /* allow corner-shape to be visible */
}

.card.shape-circle {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  corner-inline-end-shape: scoop;
}

.card.shape-inset {
  background: linear-gradient(135deg, #5eead4, #06b6d4);
  corner-inline-end-shape: bevel;
}
</style></head><body><div class="demo">
  <h2>corner-inline-end-shape examples</h2>
  <div class="cards">
    <div class="card shape-circle">
      <p>circle at inline-end</p>
    </div>

    <div class="card shape-inset">
      <p>inset rounded at inline-end</p>
    </div>
  </div>
</div></body></html>