Borders, Radius & Shadows in CSS
From the CSS cheat sheet · Borders, Shadows & Effects · verified Jul 2026
Borders, Radius & Shadows
Border styles, rounded corners, box shadows, and filters
css
.card {
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.circle { border-radius: 50%; }
.pill { border-radius: 9999px; }💡 box-shadow: 0 0 0 3px color creates a ring effect — great for focus states
⚡ backdrop-filter: blur() creates frosted glass effects — combine with semi-transparent background
📌 outline doesn't take up space or affect layout — border does
🟢 filter: drop-shadow follows the element shape (including transparency) — box-shadow is always rectangular
bordershadowradiusfilter