Card radius (modern SaaS)
Input
Rounded panel for dashboardsOutput
.card {
border-radius: 12px;
overflow: hidden;
}Generated CSS follows standard shorthand rules; verify organic blob shapes in your target browsers before shipping to production.
Skip to border radius generatorborder-radius: 16px;
Tailwind: rounded-[16px]
Corner values are computed locally—nothing uploaded. Add depth with Box Shadow Generator; clip custom shapes with Clip Path Generator.
border-radius: 16px;
border-radius: 16px;rounded-[16px]Dual-axis % / % syntax creates organic blobs — great for hero backgrounds and decorative shapes.
border-radius: 16px;The CSS border-radius property rounds an element's corners. You can set one value for all corners, two values for diagonal pairs, or four values for each corner independently. Percentages scale with element size — 50% on a square makes a circle.
Advanced syntax uses a slash to set horizontal and vertical radii separately (e.g. 30% 70% 70% 30% / 30% 30% 70% 70%), producing organic blob shapes popular in modern landing pages.
This tool runs entirely in your browser: adjust sliders or tap presets, compare before and after, then copy CSS, Tailwind arbitrary classes, inline styles, or SCSS variables.
Start with a preset (8px card, pill, circle), then fine-tune. Pair rounded corners with box-shadow for depth.
Common real-world scenarios where this tool saves time.
Designers
Try card, button, and avatar radii visually before handing specs to engineering.
Frontend developers
Get minimal shorthand (border-radius: 16px) and matching Tailwind arbitrary classes.
Students & CSS beginners
See how 4px vs 16px vs 50% changes a shape with instant preview and before/after comparison.
Marketing pages
Use dual-axis blob mode and randomize for hero backgrounds and decorative sections.
Input
Rounded panel for dashboardsOutput
.card {
border-radius: 12px;
overflow: hidden;
}Input
Standard UI buttonOutput
.btn {
border-radius: 8px;
}Input
Primary CTA with fully rounded endsOutput
.btn-pill {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}Input
Square element, equal width and heightOutput
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}Input
Decorative hero backgroundOutput
.blob {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}Quick reference for typical UI patterns.
| Pattern | CSS | Typical use |
|---|---|---|
| None | border-radius: 0 | Tables, strict grids |
| Subtle | border-radius: 4px | Inputs, small controls |
| Card | border-radius: 12px | Panels, dashboards |
| Pill | border-radius: 9999px | CTA buttons, tags |
| Circle | border-radius: 50% | Avatars on square elements |
| Blob | 30% 70% … / 30% 30% … | Hero backgrounds |
Step-by-step chains that connect related tools for common tasks.
Mixing 6px, 10px, and 14px on similar components looks unintentional — pick a scale (4, 8, 12, 16) and stick to it.
border-radius rounds the element's border box; child images can still square off unless overflow clips them.
50% radius on a rectangle produces an ellipse, not a circle — match dimensions for avatars.
Dual-axis percentage radii render well in modern browsers but complex blobs deserve a quick cross-browser check.
Use CSS Formatter or CSS Minifier — this tool generates a single border-radius property.
border-radius only rounds rectangles — use Clip Path Generator for polygons and custom masks.
Use Box Shadow Generator — radius and shadow are separate properties.
Tap None, 8px, 16px, Pill, or Circle — or open Advanced blob shapes for organic curves.
Drag sliders or type values. Keep corners linked for uniform radius, or unlink to round one corner only.
Switch preview shape (square, card, button, avatar) and toggle Before/After to see the difference from sharp corners.
Copy the CSS property, radius value only, Tailwind class, inline style, or SCSS variable into your project.
Advertisement
border-radius rounds the corners of an element's outer border edge. It accepts one to four length or percentage values and is supported in all modern browsers.
Set equal width and height, then use border-radius: 50%. On a square element, 50% produces a perfect circle.
Yes. Use the dual-axis syntax: four horizontal percentages, a slash, then four vertical percentages (e.g. 30% 70% 70% 30% / 30% 30% 70% 70%). Open Advanced blob shapes in this tool or click Random blob.
Turn off Same on all corners (unlink), then set only the corner you need — e.g. border-radius: 16px 0 0 0 for top-left only.
Cards and panels: 8–16px. Inputs and small controls: 4–8px. Primary buttons: 8px or a pill (9999px). Avatars: 50% on a square.
Yes. Copy the Tailwind arbitrary class (e.g. rounded-[16px] or rounded-[30%_70%_…]) from the output panel.
This tool focuses on border-radius only—corners, blobs, and shorthand export. CSS Button Generator composes full button styles (background, padding, hover states, and optional shadow). Use this page for radius tokens; use the button generator when you need a complete component stylesheet.
Yes. No signup required. Values are computed locally in your browser.
Border-radius values are generated in your browser — corner settings are not uploaded to EverydayTools servers.
CSS output follows standard border-radius shorthand rules; always verify blob shapes in target browsers.
For design and prototyping — align final radius tokens with your design system in production.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-07-07.
Same workflow or intent — pick the next step without leaving the site.
Tune X/Y offset, blur, spread, and color with live preview, then copy a production-ready CSS box-shadow declaration for cards, buttons, and modals.
Free CSS clip-path generator — build polygon, circle, and ellipse shapes visually with draggable points and copy the clip-path CSS property instantly. No signup needed. Runs locally in your browser when supported—no upload required for normal use.
Free CSS button generator — design custom buttons with gradients, shadows, border radius, and hover effects using visual controls. Copy the CSS and HTML instantly. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS filter generator — create blur, brightness, contrast, grayscale, hue-rotate, and other filter effects with live preview. Copy the CSS filter property. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS gradient generator — create linear and radial gradients with custom colors, stops, and directions. Live preview and one-click CSS copy. No signup required. Runs locally in your browser when supported—no upload required for normal use.
Build frosted glass CSS with WCAG contrast checker, layer composer, VisionOS/Fluent presets, and full export—CSS, Tailwind, tokens, share URL. Blur 0–40px. Browser-only, no signup.