Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Border Radius Generator

Design rounded corners, pill buttons, circles and organic blob shapes. Advanced elliptical mode with live preview — copy-ready CSS, SCSS and Tailwind output.

Live PreviewBlob GeneratorRandom BlobsTailwind SupportCSS Variables

How to use

1

Choose a preset or start from scratch

Click any preset to apply a named shape instantly: Rounded Rect, Pill, Circle, Leaf, Squircle, Blob 1–3. Or hit Random Blob for a new organic shape every click. All presets set the unit and mode automatically.

2

Adjust corners with sliders or inputs

Use the sliders or number inputs to fine-tune each corner. Toggle 'Link all corners' to move all four simultaneously — useful for uniform rounding. Switch units (px, %, rem, em) to match your project's convention.

3

Switch to Advanced for blob shapes

Advanced mode unlocks separate Horizontal (X) and Vertical (Y) radius controls per corner — this is how organic blob shapes are made. Each corner can have an asymmetric elliptical arc.

4

Copy the output format you need

Copy the CSS declaration, CSS variable (with usage comment), SCSS variable, or Tailwind arbitrary value with a single click. All four formats update live as you adjust the controls.

Common use cases

Cards & panels

8–16px rounded corners give cards a modern, approachable look. Match the corner radius across cards, modals, and inputs for a consistent design system.

Pill buttons & badges

border-radius: 999px (or 50rem) creates a pill shape that works at any button width. Use the same value for tags, chips, and status badges for visual consistency.

Avatars & profile images

border-radius: 50% on a square element produces a perfect circle — the standard shape for profile pictures, user avatars, and circular icon buttons.

Blob shapes & backgrounds

Organic blobs created with Advanced mode work as decorative background elements, section dividers, and hero artwork. The Random Blob button generates new variations instantly.

Form inputs & textareas

6–8px rounding on inputs and textareas softens the form UI. Matching the radius across all interactive elements (buttons, inputs, selects) creates a cohesive feel.

Image galleries & media

Adding border-radius to images and video thumbnails integrates them into rounded UI layouts. A value matching the surrounding card radius makes media feel native to the design.

How it works

Two rendering modes

Simple mode produces uniform per-corner radii using the standard border-radius shorthand (1–4 values). Advanced mode unlocks the elliptical syntax (H / V) where each corner's X and Y arcs are controlled independently — the CSS spec's most powerful corner-rounding feature.

Organic blob generation

Random Blob generates complementary % pairs: TL-H + TR-H ≈ 100%, BL-H + BR-H ≈ 100%, and same for vertical. This constraint keeps the shape closed and organic without sharp discontinuities — each click produces a mathematically valid, visually smooth shape.

Smart CSS shorthand

The output engine applies CSS shorthand rules: if all four corners are equal, it outputs a single value; if TL=BR and TR=BL, it outputs two values; if TR=BL, three values. This minimises output length while maintaining identical rendering.

Live element previews

The preview panel renders the border-radius on five element archetypes (Button, Card, Avatar, Image, Blob) simultaneously — so you see how the shape works in real UI context, not just an abstract square. All five update in real time with every slider change.

Related tools

CSS Box Shadow Generator

Multi-layer shadows, neumorphism and glow effects with CSS and Tailwind output.

CSS Clamp Generator

Generate fluid clamp() values for responsive typography and spacing.

CSS Gradient Generator

Build linear, radial and conic CSS gradients with live preview and Tailwind export.

CSS Flexbox Generator

Visual flexbox playground with 8 layout templates and copy-ready CSS output.

Frequently asked questions

Quick answers about this free online tool.

border-radius is a CSS shorthand property that rounds the corners of an element's border. It accepts one to four values (targeting each corner individually) and supports both circular arcs (a single length) and elliptical arcs (two lengths separated by a slash). A value of 50% on a square element produces a perfect circle; arbitrary values produce everything from pill shapes to organic blobs.

Simple: border-radius: top-left top-right bottom-right bottom-left. You can use 1–4 values (CSS shorthand rules apply — 2 values set TL+BR and TR+BL). Elliptical: border-radius: h-TL h-TR h-BR h-BL / v-TL v-TR v-BR v-BL. The slash separates horizontal radii (X-axis arc) from vertical radii (Y-axis arc). Example: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates a rounded blob shape.

Simple mode sets a single radius per corner — the arc is a perfect quarter-circle (or quarter-ellipse when using %). Advanced (elliptical) mode sets two radii per corner: one for the horizontal arc and one for the vertical arc. When the two values differ, the corner curve becomes an elliptical arc. This is what creates organic blob shapes — each corner has different X and Y arc sizes, producing asymmetric fluid curves.

px is best for UI elements with fixed corner rounding (buttons, cards, inputs) where you want the same corner size regardless of element dimensions. % is relative to the element's dimensions and is ideal for circles (50%), blobs, and shapes that should scale proportionally with the element. rem produces rounding that scales with the user's root font size — good for accessible, font-relative designs. Avoid mixing units in a single declaration when possible.

Apply border-radius: 50% to a square element. The 50% means the radius extends halfway along each side, which produces a full circle. For a non-square element, border-radius: 50% produces an ellipse. If you need a perfect circle from a non-square element, use a fixed pixel value equal to half the element's smallest dimension, or use aspect-ratio: 1 to enforce a square shape first.

Blob shapes use the elliptical syntax with the slash separator. The trick is to use % values with complementary pairs: the horizontal values for adjacent corners (left+right) should roughly sum to 100%, as should the vertical values for adjacent corners (top+bottom). Example: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Use this tool's Random Blob button to generate new organic shapes instantly, or tweak the values in Advanced mode.

Tailwind JIT mode supports arbitrary values via square-bracket notation: rounded-[value]. For a simple radius, use rounded-[12px] or rounded-[0.75rem]. For complex shapes, use rounded-[30%_70%_70%_30%] (spaces replaced with underscores in Tailwind). For elliptical blobs, Tailwind arbitrary values are less practical — use an inline style or a CSS variable with the generated value instead.

Cards and panels: 8–16px for a modern, approachable appearance. Buttons: 6–8px for rectangular, 999px for pill-shaped. Input fields: 6–8px. Avatars and profile images: 50% for circle, 12–16px for rounded-square. Modals and dialogs: 12–20px. Badges and tags: 4–6px or 999px for pill. Tooltips: 6–8px. Image thumbnails: 8–12px matching card radius for visual consistency. Blobs and decorative shapes: use Advanced mode with % values.