Border Radius Generator: Design Rounded Corners Like a Pro

Rounded corners went from a trendy design choice to a fundamental UI element. Every modern operating system, website, and app uses them — from macOS window controls to Instagram profile pictures to the card components in this very article. But getting border-radius right involves more than typing border-radius: 10px. This visual guide shows you exactly what different values produce, how to control individual corners, and how to create shapes that elevate your design from basic to polished. Try everything interactively with our free Border Radius Generator.

Understanding Border Radius Values

Border-radius defines the radius of the quarter-circle (or quarter-ellipse) that rounds each corner. The larger the value, the more dramatic the curve. Here's how different values transform a 200×200px square:

• 0px — Sharp square corners. The default for all HTML elements.
• 4px — Subtly softened corners. Nearly invisible at small sizes, but it removes the harsh pixel edge that looks dated.
• 8px — A gentle rounding. This is the sweet spot for form inputs, buttons, and small UI elements. It's noticeable without being distracting.
• 12px — Moderate rounding. Common for card components, dialog boxes, and medium-sized containers. Feels friendly and approachable.
• 16px — Pronounced rounding. Used for larger cards, feature boxes, and prominent containers. Gives a playful, modern feel.
• 24px — Heavy rounding. Creates a distinctive look for hero sections, featured content areas, and premium design elements.
• 50% — Full circle (on a square) or pill shape (on a rectangle). Used for avatars, badges, tags, and status indicators.

The jump from 0px to even 4px makes a surprising difference in perceived quality. Sharp corners feel technical and cold; rounded corners feel human and approachable. Most design systems default to 8px or 12px for this reason.

Controlling Individual Corners

You don't have to apply the same radius to every corner. CSS gives you granular control through shorthand and individual properties:

Shorthand notation (clockwise from top-left):

border-radius: 20px 0 20px 0;

This creates alternating rounded and sharp corners — the top-left and bottom-right are rounded at 20px, while top-right and bottom-left remain sharp. This diagonal pattern is popular for quote blocks and callout elements.

Individual corner properties:

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 0;

Common corner combinations:

• Top corners only: border-radius: 16px 16px 0 0 — Great for tab headers, dropdown menus, and card tops
• Bottom corners only: border-radius: 0 0 16px 16px — Perfect for sticky footers and notification banners
• Left side only: border-radius: 16px 0 0 16px — Used for sidebar elements and left-aligned badges
• Right side only: border-radius: 0 16px 16px 0 — Common for right-aligned pills and trailing indicators
• Diagonal: border-radius: 20px 0 20px 0 — Creates a distinctive angular feel for feature blocks

Creating Circles and Ellipses

When you set border-radius to 50% on a square element, the result is a perfect circle. This is the standard technique for circular avatars, icons, and profile pictures:

width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;

On a rectangular element, 50% creates an oval (stadium shape). A 200×80px element with border-radius: 40px (half the height) becomes a pill shape — a common pattern for buttons, tags, and notification badges.

The key insight: for a perfect pill, set border-radius to half the shorter dimension. For a 200×80px element, use 40px. This ensures the ends are perfectly semicircular regardless of the element's width.

Elliptical Corners with Slash Syntax

For truly organic shapes, CSS supports separate horizontal and vertical radii using slash-separated values:

border-radius: 80px / 20px;

This creates corners that are wide horizontally (80px) but shallow vertically (20px), producing a subtle curve that looks elegant on larger containers. The value before the slash controls the horizontal radius, and the value after controls the vertical radius.

You can also set different elliptical values for each corner:

border-radius: 80px 20px 80px 20px / 40px 40px 40px 40px;

This pattern creates an egg-like or leaf-like shape, useful for creative backgrounds, decorative elements, and unique card designs that stand out from template-looking layouts.

Creating Irregular and Organic Shapes

Border-radius isn't limited to gentle curves. By combining different values, you can create surprisingly complex shapes:

• Leaf shape: border-radius: 0 50% 0 50% — Creates a diagonal leaf or diamond-rounded-corner shape
• Tear drop: border-radius: 50% 0 50% 50% — A rounded shape with one sharp corner, like a speech bubble tail
• Blob shape: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% — An organic, amoeba-like form popular in modern illustrations
• Citrus slice: border-radius: 50% 0 50% 0 — Creates a quadrant-rounded shape

These shapes are increasingly popular in modern web design, especially for hero sections, feature illustrations, and background decorations. They break the rigid box aesthetic while remaining pure CSS — no SVG required.

Practical Design Tips

• Consistency is key: Pick 2-3 radius values and use them consistently across your project. A design system might define: small (4px), medium (8px), large (16px), and pill (9999px).
• Consider content type: Use sharper corners for serious/professional content (legal, financial) and rounder corners for casual/playful content (social, entertainment).
• Match your radius values: Buttons, inputs, and cards within the same component should share the same radius. Mixing 8px buttons with 16px cards looks inconsistent.
• Test at all sizes: A 12px radius looks great on a 400px card but might look awkward on a 60px thumbnail. Scale your radius values proportionally to element size.
• Add overflow: hidden: When using rounded corners with images or child elements, always add overflow: hidden to prevent content from bleeding outside the curve.

Conclusion

Border-radius is deceptively powerful. What starts as a simple rounding property can create circles, pills, ellipses, organic blobs, and unique shapes — all without images or complex markup. By understanding how values map to visual output, mastering individual corner control, and applying consistent design patterns, you can create interfaces that feel polished, modern, and intentional.

Stop guessing values in your CSS. Use our Border Radius Generator to see results in real time and copy the exact CSS you need.

Related Articles