CSS Rounded Corners
border-radius rounds the corners of any box, including images, buttons, and entire layouts. CSS will even accept different radii per corner.
Rounded corners in practice
EXAMPLE
/* All four corners the same */
.card {
border-radius: 12px;
}
/* Each corner separately (top-left, top-right, bottom-right, bottom-left) */
.badge {
border-radius: 12px 4px 12px 4px;
}
/* Asymmetric radius - first value horizontal, second vertical */
.leaf {
border-radius: 50px 10px; /* football shape */
}
/* Specific corners */
.tab {
border-radius: 8px 8px 0 0; /* top corners only */
}
/* Per corner properties */
.shape {
border-top-left-radius: 20px;
border-top-right-radius: 4px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 4px;
}
/* Pills (perfect end-caps) */
.pill {
padding: 0.5rem 1rem;
border-radius: 999px;
}
/* Perfect circles */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%; /* requires equal width/height */
}
/* Squircles (iOS-style) - use rounded radius with extra padding */
.app-icon {
width: 64px;
height: 64px;
border-radius: 18px; /* 28% of size approximates iOS look */
background: #2563eb;
}
/* Inputs and buttons - subtle is usually right */
.input { border-radius: 6px; }
.button { border-radius: 6px; }
.card { border-radius: 12px; }
.modal { border-radius: 16px; }
/* border-radius respects overflow */
.hero {
border-radius: 24px;
overflow: hidden; /* clips child img to the rounded corners */
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
/* Animate it */
.btn { transition: border-radius 0.2s; }
.btn:hover { border-radius: 999px; }
Why it matters
A consistent radius scale (4 / 6 / 12 / 16 / 24px) is a design system in itself. Reach for 50% for circles and 999px for pills. Remember `overflow: hidden` on parents so child images respect the rounded corners.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Make this element a perfect circle (it is square).
.avatar { width: 64px; height: 64px; border-radius:
; }
Half — as a percentage.
Discussion
Loading…