Card radius
Input
Modern dashboard panelOutput
.card {
border-radius: 12px;
overflow: hidden;
}12px is a common SaaS card radius; overflow clips child images to the curve.
Generated CSS follows standard border-radius shorthand rules. Verify complex elliptical or blob shapes in your target browsers before shipping.
Skip to border radius generatorAdjust CSS border-radius visually, preview rounded corners live, and copy ready-to-use CSS. Set each corner independently or use pill, circle, and blob presets.
border-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;A CSS border radius generator (also called a border radius tool or rounded corners CSS generator) creates the CSS border-radius property for UI elements. Instead of typing values blindly, you adjust corners, preview the shape, and copy production-ready CSS.
The border-radius property rounds an element's corners. You can use one value for all corners, two values for opposite pairs, three values for a common pattern, or four values for each corner independently. Percentages scale with the element's size—50% on a square makes a circle.
This page is a live border radius preview and visualizer: link or unlink corners, switch units (px, %, rem, em), try pill and circle presets, or open blob mode for elliptical slash syntax. Then generate border radius CSS and copy it as a CSS declaration, Tailwind arbitrary value, inline style, or SCSS variable. Everything runs in your browser.
Use this tool when you need rounded corners CSS you can copy immediately—cards, buttons, avatars, pills, or organic blob shapes.
Drag the sliders or type numbers for each corner. Start from a preset (8px, 16px, Pill, Circle) if you want a known starting shape.
Keep corners linked for a uniform radius, or unlink to set top-left, top-right, bottom-right, and bottom-left independently (per-corner / 4 corner border radius).
Watch the live border radius preview update instantly. Switch preview shapes (square, card, button, avatar), colors, and before/after to compare with sharp corners.
Select px, %, rem, or em so the generated CSS matches your design tokens.
Copy the CSS property, radius value only, Tailwind arbitrary class, inline style, or SCSS $border-radius variable into your project.
border-radius accepts length or percentage values and can use shorthand with 1–4 values. When horizontal and vertical radii differ, CSS uses a slash (elliptical / blob syntax). This generator formats simple corners into the shortest valid shorthand and outputs fancy mode as eight percentage values with a slash.
Formula
1 value: border-radius: 16px;
→ all four corners
2 values: border-radius: 16px 8px;
→ top-left & bottom-right | top-right & bottom-left
3 values: border-radius: 16px 8px 4px;
→ top-left | top-right & bottom-left | bottom-right
4 values: border-radius: 16px 12px 8px 4px;
→ top-left | top-right | bottom-right | bottom-left
Elliptical / blob:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
→ horizontal radii / vertical radiiPill buttons
Use the Pill preset (border-radius: 9999px) for fully rounded CTA ends. A very large radius clamps to capsule ends on a rectangular button—pair with horizontal padding for classic pill shape CSS.
Avatars & icons
The Circle preset sets border-radius: 50%. On a square element (equal width and height) that produces a perfect circle. On a non-square box it becomes an ellipse.
Marketing / heroes
Advanced blob mode outputs elliptical slash syntax (horizontal % / vertical %). Soft Blob, Sharp Blob, Organic, and Random create organic CSS shapes—not SVG blob paths.
Product UI
Typical cards use 8–16px. Buttons often use 8px or pill. Clip child images with overflow: hidden when rounding a card that contains media.
Input
Modern dashboard panelOutput
.card {
border-radius: 12px;
overflow: hidden;
}12px is a common SaaS card radius; overflow clips child images to the curve.
Input
Standard UI buttonOutput
.btn {
border-radius: 8px;
}Subtle rounding that stays crisp at small sizes.
Input
Primary CTA with fully rounded endsOutput
.btn-pill {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}Matches this tool’s Pill preset—large px radius for capsule ends.
Input
Square element, equal width and heightOutput
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}Matches the Circle preset; unequal dimensions yield an ellipse.
Input
Decorative hero background (CSS only)Output
.blob {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}Elliptical slash syntax from fancy/blob mode—not an SVG path.
Clockwise from top-left—the order this generator and CSS use.
| Position | CSS corner | 4-value slot |
|---|---|---|
| Top-left | border-top-left-radius | 1st |
| Top-right | border-top-right-radius | 2nd |
| Bottom-right | border-bottom-right-radius | 3rd |
| Bottom-left | border-bottom-left-radius | 4th |
Only units available in the generator UI.
| Unit | Typical use | Notes |
|---|---|---|
| px | Design-system tokens, fixed UI | Most common for cards and buttons |
| % | Circles, fluid shapes | Relative to element size; 50% ≈ circle on a square |
| rem | Root-relative scaling | Scales with root font size |
| em | Component-relative scaling | Scales with the element’s font size |
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 (CSS elliptical) |
border sets width/style/color of the outline. border-radius only rounds corners. Use this generator for radius—not a border-width tool.
Four values go top-left → top-right → bottom-right → bottom-left. Unlink corners here and copy the generated shorthand so the order stays correct.
50% on a non-square box is an ellipse. Use equal width and height (or the Circle preset on a square preview) for a true circle.
For soft cards, 8–16px is usually enough. Reserve 9999px for intentional pill ends.
px is absolute; % scales with the element. Circles and fluid blobs often need %; design tokens often use px or rem.
If you only need rounded rectangle corners, stay on border-radius. Use Clip Path Generator for stars, arrows, and non-rectangular masks.
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.
Use CSS Button Generator for background, padding, hover, and focus. Use this page when you only need the radius token.
Step-by-step chains that connect related tools for common tasks.
Use this page for rounded corners CSS and border-radius export. Pair nearby design tools when you need shadows, gradients, full buttons, complex masks, or Tailwind utility lookup.
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| Box Shadow Generator | You need to round corners and copy border-radius CSS. | Corners are set and you need offset, blur, spread, and shadow color. |
| CSS Button Generator | You only need a radius token or pill/circle preview. | You want a full button stylesheet with states and backgrounds. |
| CSS Gradient Generator | You are shaping corners—not fills. | You need linear, radial, or conic background gradients. |
| Clip Path Generator | Rounded rectangle corners are enough. | You need clip-path polygons, stars, or custom silhouettes. |
| Tailwind Cheatsheet | You already have an arbitrary rounded-[…] value from this tool. | You need to look up named Tailwind utilities and CSS equivalents. |
Continue the workflow with the right follow-up tool.
Advertisement
border-radius rounds the corners of an element's outer border edge. It accepts one to four length or percentage values (and elliptical slash syntax) and is supported in all modern browsers.
Set the border-radius property—for example border-radius: 12px for all corners, or four values for each corner. This CSS border radius generator previews the result and lets you copy the CSS.
Unlink corners (turn off “same on all”), then set top-left, top-right, bottom-right, and bottom-left independently. The tool outputs four-value shorthand such as border-radius: 16px 0 0 0 for top-left only.
Shorthand lets you set multiple corners in one declaration: 1 value (all), 2 values (diagonals), 3 values (top-left | top-right & bottom-left | bottom-right), or 4 values (each corner clockwise from top-left).
1 = all corners. 2 = top-left & bottom-right, then top-right & bottom-left. 3 = top-left, then top-right & bottom-left, then bottom-right. 4 = top-left, top-right, bottom-right, bottom-left. This generator collapses to the shortest valid form when corners match.
Use a very large radius such as border-radius: 9999px (this tool’s Pill preset) with horizontal padding. The ends become fully rounded capsules on a rectangular button.
Give the element equal width and height, then use border-radius: 50% (Circle preset). On a rectangle, 50% produces an ellipse instead of a circle.
Elliptical (blob) syntax sets horizontal and vertical radii separately: four values, a slash, then four more—e.g. 30% 70% 70% 30% / 30% 30% 70% 70%. Open Advanced blob shapes in this tool to generate that CSS.
px is a fixed length. Percentage radii scale with the element’s size—useful for circles (50%) and fluid blob shapes. Switch units in this generator to preview either.
Yes. This tool supports px, %, rem, and em. rem scales with the root font size; em scales with the element’s font size.
Yes. Copy the full border-radius declaration, the value only, an inline style attribute, an SCSS $border-radius variable, or a Tailwind arbitrary class—whichever you need.
Yes as a Tailwind arbitrary value (e.g. rounded-[16px] or a multi-corner / blob arbitrary class). This is not a full Tailwind rounded-* utility browser—use the Tailwind Cheatsheet for named utilities.
Yes. No signup required. Values are computed locally in your browser.
Yes. Corner values and previews are generated client-side—settings are not uploaded to EverydayTools servers for normal use.
This page focuses on border-radius only—corners, blobs, and shorthand export. CSS Button Generator builds full button styles (background, padding, hover, optional shadow). Use this page for radius tokens; use the button generator for a complete component stylesheet.
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 elliptical and 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-09-06.
Same workflow or intent — pick the next step without leaving the site.
Build CSS box-shadow with live preview. Multi-layer controls, inset, Soft/Material presets, blur & spread. Copy CSS, inline, or Tailwind—free in your browser.
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.