CSS Border Radius Tips and Common Mistakes

The border-radius rules that matter most: use pixels for consistent UI corners and percentages for circles and blobs, keep nested elements' radii mathematically aligned, and never let a huge radius do the job of a cleaner value. Rounded corners look simple, but small missteps produce lopsided cards, misaligned nested corners and muddy blob shapes. This is an expert best-practices guide to getting border-radius right, not a basic walkthrough.

Pixels vs percentages: choose deliberately

The most consequential decision is which unit to use, because they scale differently.

Unit	Behavior	Best for
Pixels (px)	Fixed corner size regardless of element size	Buttons, cards, inputs, consistent UI
Percentages (%)	Scales with the element's dimensions	Circles, avatars, pills, blob shapes

A common mistake is using a percentage on a rectangular card, which produces oval corners that stretch as the card resizes. Reach for px there. Conversely, hard-coding a pixel radius on an avatar that changes size breaks the perfect circle — use 50% so it always stays round.

Keep nested corners aligned

When a rounded element sits inside another rounded container (a button inside a card, an image inside a bordered box), mismatched radii leave an ugly gap or a corner that doesn't nest cleanly. The rule: the inner radius should equal the outer radius minus the padding between them. If the card has a 16px radius and 8px of padding, the inner element wants roughly an 8px radius. Ignore this and the concentric corners look subtly wrong even if you can't say why.

Building clean blob shapes with 8-value syntax

Organic blob shapes come from the slash syntax, where the four values before the slash set each corner's horizontal radius and the four after set the vertical radii — for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Tips for shapes that actually look good:

• Use percentages, not pixels, so the blob scales with the element instead of distorting.
• Make opposite corners asymmetric. If all values are similar you just get a soft rectangle; contrast between corners is what creates the fluid, hand-drawn feel.
• Keep horizontal and vertical sets different. Identical values on both sides of the slash give a symmetric shape; varying them produces the lopsided organic look popular in hero sections.
• Iterate visually. Eight values are almost impossible to tune in your head — dragging sliders and watching the preview is far faster than editing numbers by hand.

Common mistakes and gotchas

• Wrong value order. The four values run clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Mixing up the order rounds the wrong corners.
• Expecting a giant radius to do more. Browsers cap each radius so adjacent corners never overlap; once the combined radii exceed the side length the values scale down, so pushing past that point changes nothing. Use 50% for a full pill rather than an arbitrarily large pixel value.
• Clipping child content. A rounded parent doesn't clip children by default — add overflow: hidden so an inner image respects the corner.
• Forgetting the ellipse effect. 50% on a non-square element makes an ellipse, not a circle. Make the element square first.

Try the CSS Border Radius Generator — free and 100% in your browser.

FAQ

Should I use px or percent for a card's rounded corners?

Use pixels. A fixed px radius keeps the corner the same size no matter how the card resizes, whereas a percentage produces oval corners that stretch with the element. Save percentages for circles, pills and blobs.

How do I stop nested rounded corners from looking misaligned?

Match the inner radius to the outer radius minus the padding between them. If the container is 16px rounded with 8px padding, give the inner element about an 8px radius so the corners stay concentric.

Why does increasing my border-radius stop changing the shape?

Browsers cap radii so neighbouring corners can't overlap. Once the combined radii exceed the element's side length they're scaled down proportionally, so larger values have no further effect. Use 50% for a full pill or circle.

What makes a blob shape look organic instead of just soft?

Asymmetry. Give opposite corners contrasting values and use different numbers on each side of the slash in the 8-value syntax. Uniform values only round a rectangle; varied ones create the fluid look.

Related free tools

• CSS Box Shadow Generator — pair soft corners with a matching shadow.
• CSS Clip Path Generator — cut more complex shapes beyond rounding.
• CSS Gradient Generator — fill your rounded shapes with gradients.
• CSS Formatter — tidy the CSS once you've copied it.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS platforms and custom software with a strong eye for front-end craft. If you want a polished UI built properly, explore how ByteVancer can help.