Round corners visually and copy the exact border-radius CSS — with live preview.
The CSS Border Radius Generator lets you round element corners with sliders and see the result update live. Adjust all four corners together for a uniform radius, or set each corner independently for asymmetric shapes, then copy production-ready border-radius CSS. It replaces the guess-and-check loop of tweaking values in browser dev tools.
The border-radius property rounds the corners of an element's box. A single value rounds all four corners equally; four values set the top-left, top-right, bottom-right, and bottom-left corners in order. Larger values produce softer curves, and a value of 50% on a square turns it into a circle. You can even provide two radii per corner to create elliptical curves. The generator writes the correct shorthand for whatever combination you choose.
Corner radius is a small detail that shapes the personality of an interface. Sharp corners feel formal and technical; gentle rounding feels friendly and approachable; fully rounded pills feel playful and modern. Design systems usually define a small scale of radii — say 4px, 8px, and 16px — and apply them consistently to buttons, inputs, cards, and modals. Getting these values exact and consistent is what makes an interface feel polished rather than accidental, and a generator with a live preview makes that precision easy.
Create a card with only the top corners rounded:
border-radius: 12px 12px 0 0;The live preview shows a shape with a smooth rounded top and square bottom — ideal for a card header or a tab. Copy the one-line rule straight into your stylesheet.
Keep radii on a consistent scale rather than picking arbitrary numbers per component — reusing a few defined values makes a UI feel coherent. For pill-shaped buttons, a very large radius like 999px adapts to any height automatically. Watch out for nesting: a rounded element inside another rounded element usually needs a slightly smaller inner radius to look concentric. And remember that overflow: hidden is often needed to clip child content (like an image) to the rounded corners.
Yes — set each corner independently for asymmetric shapes.
Use a large radius, or 50% on a square element, to create pills and circles; the preview shows the effect live.
Pixels are common, and percentages are useful for circles; the generator outputs valid CSS for your chosen values.
Add overflow: hidden to the container so child content is clipped to the rounded corners.
Yes — copy the generated border-radius straight into your stylesheet.
border-radius is supported across all modern browsers.
Combine it with the CSS Box Shadow Generator and CSS Color Converter to finish a component's look.
How to Use CSS Border Radius Generator
Use the sliders to set the radius for each corner.
Watch the live preview update in real time.
Copy the generated border-radius CSS into your project.
Round corners visually and copy the exact border-radius CSS — with live preview.
Tool Use:
0Added:
Sep 11, 2026Type:
Free ToolPrivacy:
Client SideGenerate custom QR codes for URLs, vCards, Wi-Fi, text, and more — high-resolution PNG and SVG download, free.
Generate stylish text images with custom fonts, colors, gradients, shadows, and strokes. Download as PNG instantly — perfect for social media, logos, and banners.
Encode text or files to Base64 and decode Base64 strings back to text. Free, instant, browser-only — no upload, no logging.
Generate globally unique identifiers (UUID v4) for databases, sessions, and distributed systems — instant and bulk-friendly.
Generate strong, random passwords with custom length, character classes, and exclusions — perfect for new accounts and password rotation.