DevBolt
Processed in your browser. Your data never leaves your device.

How do I generate CSS border-radius online?

Adjust per-corner sliders to set border-radius values for top-left, top-right, bottom-right, and bottom-left independently. See a live preview shape, toggle between px, %, and em units, and choose from presets like pill, circle, or blob. Copy the CSS with one click. Everything runs in your browser.

Rounded corners
Input
All corners: 12px
Output
border-radius: 12px;
← Back to tools

CSS Border Radius Generator

Design CSS border-radius visually. Adjust each corner independently or link them, choose units, and copy the CSS.

px
px
px
px

Preview Settings

12px
12px
12px
12px

CSS Output

border-radius: 12px;

Presets

About CSS Border Radius

The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually.

Shorthand: border-radius: top-left top-right bottom-right bottom-left — values go clockwise from the top-left corner.

Units: Use px for fixed rounding, % for proportional rounding (50% on a square creates a circle), em/rem for scalable rounding relative to font size.

Pill shape: Set a very large pixel value (e.g. 9999px) on a rectangular element to create a fully rounded pill shape. This works because the radius is clamped to half the element's dimension.

Elliptical corners: CSS also supports separate horizontal and vertical radii using the border-radius: h-radius / v-radius syntax for asymmetric curves, though this generator focuses on circular (uniform) corners.

Tips & Best Practices

Pro Tip

Use percentage for perfect circles and ellipses

border-radius: 50% on a square element creates a perfect circle. On a rectangle, it creates an ellipse. For pill-shaped buttons, use border-radius: 9999px — this guarantees fully rounded ends regardless of the element's height. Avoid using exact pixel values for pill shapes, as they break when content changes size.

Common Pitfall

Individual corner syntax has two notations — don't mix them

The shorthand border-radius: 10px 20px 30px 40px sets all four corners (top-left, top-right, bottom-right, bottom-left — clockwise from top-left). The longhand border-top-left-radius: 10px 20px sets horizontal and vertical radii for elliptical corners. Mixing shorthand clockwise order with the longhand properties causes unexpected results.

Real-World Example

Superellipse (squircle) shapes for iOS-style icons

Apple's iOS icons use a superellipse, not border-radius. CSS can approximate this with border-radius values slightly less than 50%: try border-radius: 22% for a squircle effect. For pixel-perfect iOS icons, use SVG clip-path with a superellipse formula or the CSS clip-path: path() function.

Security Note

Border radius clips content but doesn't clip pointer events

A rounded element still has a rectangular click area unless you add clip-path. An invisible corner region can still receive clicks, causing unexpected button presses or link activations. For circular buttons, match the clickable area with border-radius: 50% AND a clip-path or explicit pointer-events handling.

Frequently Asked Questions

How do I set different border-radius values for each corner in CSS?
Use the individual corner properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Or use the shorthand with four values in clockwise order: border-radius: 10px 20px 30px 40px sets top-left to 10px, top-right to 20px, bottom-right to 30px, and bottom-left to 40px. With two values, the first applies to top-left and bottom-right, the second to top-right and bottom-left. DevBolt's visual generator provides sliders for each corner so you can design the exact shape you want and copy the generated CSS code instantly.
How do I create a circle or pill shape with border-radius?
For a perfect circle, set border-radius to 50% on a square element with equal width and height. For a pill or capsule shape, set border-radius to a value equal to or greater than half the element's height on a rectangular element. A button that is 40px tall with border-radius: 20px or border-radius: 9999px creates a pill shape. The 9999px trick works because browsers clamp the radius to the maximum possible curve, ensuring a perfect pill regardless of element dimensions. DevBolt's preview shows the shape updating in real time as you adjust the radius values.
What is the difference between px and % values for border-radius?
Pixel values create a fixed curve size regardless of the element's dimensions. A 10px border-radius always creates the same size curve on any element. Percentage values are relative to the element's dimensions, with horizontal radii calculated from the width and vertical radii from the height. The most notable difference appears with 50%: on a square element, 50% creates a perfect circle, while a fixed pixel value only rounds the corners. For responsive designs, percentages adapt as element sizes change. For consistent small corner rounding across different components like cards and buttons, pixel values like 8px or 12px are more predictable and commonly used in design systems.

Related Generate Tools

MCK

JSON Mock Data Generator

Generate realistic fake JSON data for API testing with 30+ field types, preset templates, and schema builder

RDM

README Generator

Generate professional GitHub README.md files with badges, installation steps, usage examples, and more

R.T

robots.txt Generator

Generate robots.txt files with crawl rules for Googlebot, Bingbot, AI bots, and more — presets included

ZOD

Zod Schema Generator

Generate Zod validation schemas from JSON — auto-detects emails, URLs, UUIDs, dates, and nested objects