Dev
CSS Border Radius Generator
A CSS border-radius generator that outputs a copy-paste snippet in three modes. Simple mode gives you one uniform radius for the whole element. Per-corner mode lets you set each corner independently and returns both the shorthand form and the four longhand properties. Organic-blob mode randomises the eight-value fancy syntax to produce a natural, asymmetric shape suitable for hero images, decorative backgrounds, and avatar frames. The snippet is deterministic in simple and per-corner modes and randomised on every click in blob mode, so you can keep clicking until a shape lands right. Each output also includes a matching .card or .blob selector you can paste straight into a stylesheet and a short usage note explaining what the values do. The generator clamps out-of-range numbers and falls back to sensible defaults on missing input, so it never returns broken CSS. It is meant for real, production-safe rules — the fancy syntax uses percentages that scale with the box, so a blob keeps its silhouette when you resize the element.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Pick a mode — simple for one uniform radius, per-corner for independent corners, organic-blob for a random asymmetric shape.
- For simple mode, drag or type the radius value between 0 and 100 pixels.
- For per-corner mode, set the four corner values independently and read the collapsed shorthand in the output.
- For organic-blob mode, click generate repeatedly until a shape lands right — every click reshuffles the eight percentage values.
- Copy the border-radius line and paste it into your stylesheet, then optionally grab the matching .card or .blob selector block.
Use Cases
- •A designer prototyping button and card corner radii for a new design system without leaving the browser
- •A frontend developer wiring up an avatar frame that needs an organic blob shape instead of a plain circle
- •A marketing site owner tweaking hero image corners to match a fresh brand refresh in minutes
- •A CSS learner comparing the shorthand and longhand border-radius forms side by side to understand the property
- •A component library maintainer generating consistent per-corner values for a rounded chat bubble variant
Tips
- →Very small radii (2–4px) read as premium and understated; radii above 20px start to look playful — pick the range that matches your brand voice.
- →For pill buttons, set the radius to half the button's height rather than a huge number, or use border-radius: 9999px which auto-clamps to a pill.
- →When an ancestor has overflow: hidden, give it a border-radius at least as large as its rounded children so their corners are not clipped by the parent's square edge.
- →In organic-blob mode, keep generating until you find a shape whose asymmetry reads intentional rather than lopsided — a good blob usually has one clearly dominant lobe.
- →Animate border-radius on hover with a 200–300 ms transition for a subtle squishy feel — the cubic-bezier generator on this site pairs well with it.
FAQ
how do I only round the top corners of an element
Use per-corner mode and set top-left and top-right to your radius, then bottom-right and bottom-left to 0. The shorthand form the generator returns will collapse to two values like border-radius: 12px 12px 0 0.
what is the eight-value border-radius syntax used for organic blobs
The syntax border-radius: X% Y% Z% W% / A% B% C% D% sets horizontal radii before the slash and vertical radii after. When the two radii on the same corner differ, the corner curves asymmetrically — that asymmetry is what makes a shape look hand-drawn rather than machined.
Should I use pixels or percentages for border-radius?
Pixels give a consistent visual weight regardless of element size, which is what you usually want for buttons and cards. Percentages scale with the box and are the right choice for pill shapes, circles, and organic blobs that need to keep their silhouette when the element resizes.
why does my rounded corner look clipped or squared off
This usually happens when an ancestor has overflow: hidden and its own border-radius is smaller than the child's, or when the element has a border that visually competes with the curve. Check the parent's radius and make sure any background or border-image is not painting past the curve.
Can I animate border-radius smoothly?
Yes — border-radius is animatable and transitions well between two pixel or percentage values on the same unit. Animating between fundamentally different shorthands (e.g. one value to four values) is supported but can look glitchy, so keep the syntax consistent across states.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.