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.
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.
Set corner radii in Simple or Fancy mode with live preview.
Check the live preview against your target shape or card layout.
Copy the generated CSS or Tailwind class to your stylesheet or component.
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.
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.