Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Subtle card rounding */ .card { border-radius: 8px; } /* Pill / badge shape */ .badge { border-radius: 999px; /* large enough to always be pill */ padding: 0.25em 0.75em; } /* Perfect circle */ .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } /* Chat bubble — one sharp corner */ .bubble { border-radius: 16px 16px 16px 0; background: #e8f0fe; padding: 0.75rem 1rem; } /* Organic blob shape with elliptical radii */ .blob { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; background: linear-gradient(135deg, #1a73e8, #0d47a1); width: 200px; height: 200px; }
Result
Open