The CSS border-radius property rounds the sharp outer corners of an element's border box, allowing developers to create soft pill buttons, rounded cards, and perfect circular avatars.
border-radius accepts pixel values, percentages, or rem units:
/* All 4 corners rounded equally */
.card { border-radius: 8px; }
/* Perfect Circle (Requires equal width and height) */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
/* Pill Button (Large border-radius) */
.btn-pill { border-radius: 9999px; }
/* Individual corners: top-left, top-right, bottom-right, bottom-left */
.custom-box { border-radius: 12px 12px 0 0; }
Key usages:
border-radius: 9999px to create capsule-shaped buttons.border-radius: 50% on equal-dimension elements.border-radius: 8px 8px 0 0) to round only top corners of card cover images.flowchart TD
A["border-radius Options"] --> B["8px / 12px (Subtle rounded card corners)"]
A --> C["50% (Perfect circular avatar images)"]
A --> D["9999px (Fully rounded pill buttons)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Rounded Corners Example</title>
<style>
.pill-button {
display: inline-block;
background-color: #2563eb;
color: #ffffff;
padding: 10px 24px;
border-radius: 9999px;
text-decoration: none;
font-weight: bold;
}
.rounded-card {
background-color: #1e293b;
padding: 1.5rem;
border-radius: 12px;
max-width: 400px;
margin-top: 1.5rem;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<a href="#" class="pill-button">Pill-Shaped Button</a>
<div class="rounded-card">
<h3>Soft Rounded Card Container</h3>
<p>Using <code>border-radius: 12px</code> gives UI containers a modern, friendly aesthetic.</p>
</div>
</body>
</html>
overflow: hidden on parent containers when embedding images: Ensures child background images do not overflow outside rounded corners.border-radius: 50% for circular profile photos: Make sure width and height are equal before applying 50% border-radius.4px inputs, 8px cards, 12px modals).Create a CSS class .avatar that makes a 60px by 60px image into a circle using border-radius: 50%;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.