What does Border Radius Generator do?
Design rounded corners with visual controls.
Design rounded corners with visual controls.
Create simple rounded corners or organic blob shapes with live preview. Generate production-ready CSS code instantly.
border-radius: 16px;rounded-[16px]Use 'Link Corners' to adjust all corners at once. The tool automatically outputs the shortest valid CSS syntax.
The CSS border-radius property rounds the corners of an element's outer border edge. It accepts one to four values — one per corner — and supports multiple units: px, %, rem, and em. The advanced two-axis syntax (values separated by a /) lets you set independent horizontal and vertical radii for each corner, producing organic blob shapes.
Browser support is universal — every modern browser has supported border-radius since 2012. It works on any block or inline-block element: buttons, cards, images, avatars, inputs, and SVGs. Pair it with overflow: hidden to clip child content to the rounded shape.
A small radius (4–8 px) gives buttons a modern, professional look. A full pill shape (9999 px or 50%) is common for primary action buttons. Use the generator to find the right feel for your design system.
Cards typically use 8–16 px. Larger radius values (20–32 px) feel more playful and work well in consumer apps. Use consistent values across your UI to maintain visual harmony.
A 50% border-radius on a square element creates a perfect circle — the standard for user avatars, profile pictures, and icon containers in most design systems.
The dual-axis syntax creates fluid, organic shapes used in hero illustrations, decorative background blobs, and abstract section dividers. Use the Fancy mode and randomize to find a shape.
| Value | CSS | Typical use |
|---|---|---|
| None | border-radius: 0 | Sharp corners — tables, images, strict grid layouts |
| Subtle | border-radius: 4px | Inputs, checkboxes, minimal button style |
| Standard | border-radius: 8px | Cards, dropdowns, most UI components |
| Rounded | border-radius: 12–16px | Modern SaaS dashboards, app panels |
| Large | border-radius: 24–32px | Marketing pages, playful consumer apps |
| Pill | border-radius: 9999px | Tags, badges, primary CTA buttons |
| Circle | border-radius: 50% | Avatars, icon buttons, status indicators |
| Blob | dual-axis %/% syntax | Organic hero shapes, decorative backgrounds |
px — Fixed values. Use when you want the radius to stay the same regardless of font size or element size. Best for small elements like inputs, badges, and buttons where the exact shape matters.
% — Proportional to the element's dimensions. A 50% radius on a square creates a perfect circle. On non-square elements, % values create ellipses. Required for the dual-axis blob syntax.
rem / em — Scales with the root or parent font size. Use rem when you want border radius to respect accessibility settings (user font size preferences). Common in design systems that define spacing in rem units.
.card {
border-radius: 12px;
overflow: hidden; /* clips child images to shape */
}12 px is a common card radius in Material Design and Tailwind's rounded-xl (which equals 12 px). Add overflow: hidden so that images and child elements respect the rounded edges.
.btn-pill {
border-radius: 9999px; /* or 100vmax */
padding: 0.5rem 1.5rem;
}Using a very large fixed value like 9999 px is the standard pill pattern — it always produces a perfect pill regardless of the button's width. This is equivalent to Tailwind's rounded-full.
Design rounded corners with visual controls. Use it in your browser without uploading files for typical workflows.
Free CSS border radius generator — set individual corner values visually and copy the CSS border-radius property instantly. Supports all four corners independently. No signup. Runs locally in your browser when supported—no upload required for normal use. Designed for quick everyday tasks with clear, copy-friendly output.
Free CSS border radius generator — set individual corner values visually and copy the CSS border-radius property instantly. Supports all four corners independently. No signup.
Concise answers for common searches — definitions, steps, and comparisons.
Design rounded corners with visual controls.
Border Radius Generator (/border-radius-generator) runs in your browser when supported—inputs are not uploaded to EverydayTools servers.
Load Border Radius Generator on EverydayTools—no account required.
Type, paste, or upload depending on what the tool accepts.
Results update in your browser for typical use cases.
Copy the output or use download/export when available.
Common real-world scenarios where this tool saves time.
Design rounded corners with visual controls.
Use when you want results without uploading files—local browser processing when the tool supports it.
Open Border Radius Generator in any modern browser for quick checks with copy-friendly output.
How this EverydayTools page compares for typical use.
| Aspect | EverydayTools | Typical alternative |
|---|---|---|
| Cost | Free | Paid apps or trials |
| Privacy | Browser-local when supported | Often requires cloud upload |
| Signup | Not required | Often required |
Advertisement
Simple mode creates standard CSS border-radius with uniform or individual corner values. Fancy mode uses dual-axis border-radius with percentages to create organic blob shapes.
Switch to Fancy mode and use Randomize, or adjust the eight sliders (horizontal and vertical radii per corner) after choosing a preset.
Yes—use the Tailwind export for arbitrary rounded-[…] classes that match your generated border-radius.
Design rounded corners with visual controls.
Border Radius Generator (/border-radius-generator) runs in your browser when supported—inputs are not uploaded to EverydayTools servers.
Border-radius and blob CSS are generated in your browser—corner values and shapes are not uploaded.
Always verify in target browsers; GPU cost rises with large blur on big elements.
For design and prototyping—not a substitute for design-system tokens in production.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-19.