CSS corner-bottom-right-shape Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 24px; background: #f6f8fb; color: #1d2939; }
.demo { max-width: 920px; margin: 0 auto; }
.title { margin: 0 0 18px 0; font-size: 20px; }
.cards { display: flex; gap: 20px; }

/* Card base styles */
.card {
    width: 300px;
    height: 180px;
    padding: 18px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, #7dd3fc 0%, #60a5fa 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(16,24,40,0.08);
    position: relative;
    transition: transform 220ms ease, box-shadow 220ms ease;
    overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(16,24,40,0.12); }
.card__content { z-index: 1; }
.card__content strong { display: block; font-size: 18px; margin-bottom: 6px; }
.card__content p { margin: 0; font-size: 13px; opacity: 0.95; }

/* Example: round bottom-right corner using the property */
.card--round {
    /* modern (experimental) property */
    corner-bottom-right-shape: round;
    corner-bottom-right-size: 48px;

    /* fallback for browsers without support */
    border-bottom-right-radius: 48px;
}

/* Example: notch bottom-right corner using the property */
.card--notch {
    corner-bottom-right-shape: notch;
    corner-bottom-right-size: 48px;

    /* fallback: clip-path that creates a notch at the bottom-right */
    /* clip-path here approximates a bottom-right notch of 48px */
    clip-path: polygon(
        0% 0%, 100% 0%, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0% 100%
    );
}

/* Small note styling */
.note { margin-top: 14px; font-size: 13px; color: #475569; }</style></head><body><div class="demo">
    <h2 class="title">corner-bottom-right-shape  -  examples</h2>

    <div class="cards">
        <div class="card card--round">
            <div class="card__content">
                <strong>Round</strong>
                <p>Uses corner-bottom-right-shape: round;</p>
            </div>
        </div>

        <div class="card card--notch">
            <div class="card__content">
                <strong>Notch</strong>
                <p>Uses corner-bottom-right-shape: notch;</p>
            </div>
        </div>
    </div>

    <p class="note">If the property isn't supported by the browser, the fallback border-radius or clip-path will be used.</p>
</div></body></html>