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

<!DOCTYPE html><html><head><style type="text/css">/* Layout */
body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
    padding: 40px;
}

.demo {
    width: 100%;
    max-width: 820px;
    text-align: center;
}

h1 {
    margin: 0 0 18px 0;
    font-size: 18px;
    color: #102a43;
}

.cards {
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: center;
}

/* Card appearance */
.card {
    width: 260px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #556fff, #8b6bff);
    border: 2px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 18px rgba(24, 39, 75, 0.06);
    padding: 16px;
    box-sizing: border-box;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-start-end-radius: 36px;
    corner-start-end-shape: scoop;
}

/* Alternate shape on the second card */
.card.beveled {
    background: linear-gradient(135deg, #ff7b7b, #ffb86b);
    border-start-end-radius: 36px;
    corner-start-end-shape: bevel;
}
</style></head><body><div class='demo'>
    <h1>corner-start-end-shape  -  demo</h1>

    <div class='cards'>
        <div class='card round'>
            <p>Round start-end corner</p>
        </div>

        <div class='card beveled'>
            <p>Beveled start-end corner</p>
        </div>
    </div>
</div></body></html>