CSS Border Radius Examples: From Basic Corners to Custom Shapes

May 18, 2026·10 min read

Quick answer: border-radius accepts values in pixels, percentages, or rem. Use border-radius: 8px for subtle rounding, border-radius: 50% for circles, border-radius: 9999px for pills, and the 8-value syntax (border-radius: a b c d / e f g h) for organic shapes. Below are 15 examples with the exact CSS code, from basic to advanced.

I've been collecting border-radius patterns for years. Not because the property is complicated --- it's one of the simplest in CSS --- but because the difference between a well-chosen border-radius and a default one is the difference between a polished UI and a generic one. A 4px radius feels like a spreadsheet. A 16px radius feels like a modern app. A carefully tuned asymmetric radius feels like a designed product.

Here are the examples I actually use in production, starting from the basics and building up to shapes most developers don't know border-radius can create.

Border Radius Values Reference

Before the examples, here's the value-to-visual mapping that took me years to internalize:

Value	Visual Result	Common Use Case
`0`	Sharp corners	Tables, code blocks, brutalist design
`2px`	Barely perceptible rounding	Inline code, small tags
`4px`	Subtle rounding	Form inputs, buttons (conservative)
`6-8px`	Noticeable soft corners	Cards, modals, dropdowns
`12-16px`	Rounded, modern feel	Feature cards, hero sections
`20-24px`	Very rounded	Image thumbnails, notification panels
`50%`	Circle (on square elements)	Avatars, icon backgrounds
`9999px`	Pill / stadium shape	Tags, badges, pill buttons
`8-value syntax`	Custom organic shapes	Blobs, decorative elements

The jump from 4px to 8px is where most designs go from "template" to "crafted." I default to 8px on most projects now. Anything under 4px is barely visible on high-DPI screens.

Example 1: Subtle Card Corners

The bread and butter. Slightly rounded corners on a content card:

.card {
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Why 8px and not 4px or 12px? At 8px, the rounding is visible without being a design statement. It softens the hard edges of a box without making the element feel "bubbly." Most major design systems land between 6px and 12px for cards: Material Design uses 12px, Apple's HIG uses 10px, and Shopify Polaris uses 8px.

Example 2: Modern Button

Buttons need more radius than cards because they're smaller. The rounding is more noticeable at smaller sizes:

.button {
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  padding: 10px 20px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

6px on a button with 10px vertical padding gives a radius-to-height ratio of about 15%. That's the sweet spot --- rounded enough to feel clickable, sharp enough to feel structured. Going to 12px+ makes buttons feel playful (fine for a kids' app, wrong for a banking dashboard).

Example 3: Pill Button / Tag

A fully rounded, capsule-shaped element. Used for tags, badges, filter chips, and pill-style navigation:

.pill {
  border-radius: 9999px;
  background: #eff6ff;
  color: #2563eb;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
}

The 9999px value is a hack that works because border-radius can't exceed half the element's height. A value of 9999px always creates the maximum possible rounding regardless of the element's actual size. You could use 50%, but 50% on non-square elements creates an ellipse, not a pill. 9999px guarantees the stadium/pill shape at any width and height.

Example 4: Perfect Circle

Avatars, icon containers, and status indicators:

.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

50% on a square element creates a perfect circle. The element must be square --- if width and height differ, 50% creates an ellipse. I always add overflow: hidden so images or content inside the circle get clipped to the circular boundary.

For avatar images specifically, add object-fit: cover to the <img> inside so the photo fills the circle without distortion.

Example 5: Top-Rounded Card (Sheet Style)

A card with rounded top corners and sharp bottom corners --- the "bottom sheet" pattern from mobile UIs:

.sheet {
  border-radius: 16px 16px 0 0;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

The 4-value shorthand goes clockwise: top-left, top-right, bottom-right, bottom-left. 16px 16px 0 0 rounds the top corners at 16px and leaves the bottom sharp. This is the standard pattern for iOS bottom sheets, Android bottom navigation, and modal drawers that slide up from the bottom of the screen.

Example 6: One-Corner Accent

Rounding a single corner creates a distinctive shape for feature callouts, pull quotes, or decorative sections:

.accent-corner {
  border-radius: 0 0 32px 0;
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  padding: 20px 24px;
}

Only the bottom-right corner is rounded, creating an asymmetric shape. This works for pull-quote boxes, sidebar callouts, and section accents where you want visual interest without full rounding. The 32px value is intentionally large --- subtle single-corner rounding (like 8px) is barely noticeable and looks like a mistake rather than a design choice.

Example 7: Dialog / Modal

Modals typically use more radius than cards to visually separate them from the page content:

.modal {
  border-radius: 16px;
  background: #ffffff;
  padding: 32px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  max-width: 480px;
  width: 90%;
}

16px is the modern standard for modals. Apple uses 14px, Google uses 28px (Material Design 3), and most custom UIs land somewhere in between. The larger shadow (48px blur) combined with the rounding makes the modal feel like it's floating above the page. Tight shadows (4-8px blur) with large radius look flat.

Example 8: Image with Rounded Corners

Rounding the corners of images in a card or gallery:

.rounded-image {
  border-radius: 12px;
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

Always pair border-radius with object-fit: cover on images. Without it, the image stretches to fill the dimensions and the rounding reveals the distortion at the corners. 12px is my default for image rounding --- it's noticeable without being aggressive.

For images inside cards, there's a trick: round only the image's top corners to match the card's top radius:

.card-image {
  border-radius: 8px 8px 0 0;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

This makes the image sit flush against the card top while the card handles the bottom corners.

Example 9: Notification Badge

The small red dot or numbered badge on icons:

.badge {
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -6px;
}

/* For multi-digit badges, use pill shape */
.badge-large {
  border-radius: 9999px;
  background: #ef4444;
  color: #ffffff;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

Single-digit badges (1-9) use 50% on a fixed square. Multi-digit badges (10, 99+) use 9999px with min-width and horizontal padding so the pill grows horizontally. This is how iOS, Android, and every major web app handles badge counts.

Example 10: Input Field

Form inputs need subtle rounding to feel modern without looking out of place:

.input {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  padding: 10px 14px;
  font-size: 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease;
}

.input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

6px matches most button radiuses, keeping forms consistent. The focus state adds a focus ring using box-shadow instead of outline so the ring follows the rounded corners. Native outline doesn't respect border-radius in all browsers, leaving you with a rounded input inside a square outline.

Example 11: Tooltip

Tooltips need enough rounding to feel "soft" but not so much that they look like pills:

.tooltip {
  border-radius: 6px;
  background: #1f2937;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 240px;
  position: absolute;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

6px radius, dark background, small shadow. The arrow/pointer is typically a separate pseudo-element (::after with a CSS triangle) positioned at the edge. The tooltip body radius doesn't affect the arrow --- they're independent elements.

Example 12: Progress Bar

A fully rounded container with a fully rounded fill:

.progress-bar {
  border-radius: 9999px;
  background: #e5e7eb;
  height: 8px;
  overflow: hidden;
}

.progress-fill {
  border-radius: 9999px;
  background: #2563eb;
  height: 100%;
  width: 65%;
  transition: width 0.3s ease;
}

Both the container and the fill use 9999px for full rounding. overflow: hidden on the container ensures the fill's rounded corners are clipped when the progress is at low percentages (otherwise the fill's right edge would show a rounded end peeking out of a flat container edge). At 8px height, full rounding looks like a capsule. Below 4px height, rounding is invisible --- save the property.

Example 13: Squircle (Superellipse Approximation)

Apple popularized the squircle --- a shape between a square and a circle with smoother corner curves than standard border-radius:

.squircle {
  width: 120px;
  height: 120px;
  border-radius: 28%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

True squircles use a superellipse formula that CSS can't perfectly replicate, but border-radius: 22-30% on a square element gets close enough for most purposes. Apple's iOS app icons use a precise superellipse, but in browser contexts, 28% is a convincing approximation. The visual difference between border-radius: 28% and a true superellipse is about 2-3 pixels at 120px size --- invisible to most users.

Example 14: Half-Circle Divider

A decorative section divider using a half-circle:

.half-circle-divider {
  width: 100%;
  height: 60px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: #1f2937;
}

The 8-value syntax with 0 0 50% 50% / 0 0 100% 100% creates a smooth arch on the bottom edge. The top is flat (0 values) and the bottom has maximum curvature. This replaces SVG curve dividers with a single div and one CSS property. Adjust height to control how pronounced the curve is --- 40px for subtle, 80px for dramatic.

Example 15: Organic Blob Shape

The advanced case --- creating irregular, liquid shapes using the full 8-value syntax:

.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 42% 58% 62% 38% / 45% 51% 49% 55%;
}

Each corner has independent horizontal and vertical radii, creating an irregular shape that looks hand-drawn. I covered the theory and more blob variations in the fancy border-radius guide --- that article explains the 8-value syntax in depth with an interactive reference.

To create and preview these shapes visually instead of guessing numbers, the border radius generator gives you drag-and-drop control over each corner's horizontal and vertical radii.

Common Mistakes

Using border-radius: 50% on non-square elements. This creates an ellipse, not a circle. If you want a circle, ensure the element has equal width and height. If you want a pill, use 9999px instead.

Forgetting overflow: hidden on image containers. The parent gets rounded corners, but the image inside ignores the parent's radius and peeks out with sharp corners. Add overflow: hidden to the parent or apply the radius directly to the <img>.

Mixing units inconsistently. Using border-radius: 50% 8px 50% 8px mixes percentages and pixels, which behaves unpredictably at different element sizes. Pick one unit per declaration. Percentages for responsive shapes, pixels for consistent rounding at all sizes.

Over-rounding small elements. A 16px border-radius on a 32px-tall button means the corners overlap, creating a full capsule when you wanted subtle rounding. As a rule, keep the radius below 50% of the element's smallest dimension unless you specifically want full rounding.

FAQ

What's the difference between `border-radius: 50%` and `border-radius: 9999px`?

On a perfect square, both create a circle. On a rectangle, 50% creates an ellipse (the corner radii are 50% of each dimension), while 9999px creates a pill/stadium shape (the shorter sides are fully rounded, the longer sides remain straight). For pills and tags, always use 9999px. For circles and ellipses, use 50%.

Can I animate border-radius?

Yes. border-radius is animatable with CSS transitions and keyframe animations. transition: border-radius 0.3s ease smoothly morphs between shapes. This is commonly used for hover effects (square to circle on hover) and decorative blob animations. Animating border-radius triggers repaints, so keep simultaneous animations to 3-4 elements maximum on mobile devices.

Does border-radius affect click/tap targets?

No. The clickable area of an element remains its full rectangular bounding box, regardless of border-radius. Even if an element looks circular, clicking in the "cut off" corner still triggers click events. For precise circular hit targets, use clip-path: circle() instead --- it actually clips the interactive area.

Why doesn't my border-radius show on table cells?

Tables have border-collapse: collapse by default, which prevents border-radius from rendering on individual cells. Switch to border-collapse: separate and apply the radius. Alternatively, use border-spacing: 0 with border-collapse: separate to get the collapsed look while keeping rounded corners.

Next Steps

Generate border-radius values visually with the border radius generator --- drag corners, copy the CSS
Add depth to your rounded elements with the text shadow generator for text effects that complement rounded UI
Explore the 8-value syntax in depth with the fancy border-radius guide for organic blob shapes