How do I make a circle?

Apply 50% to a perfectly square element. Something like 'width: 100px; height: 100px; border-radius: 50%' produces a clean circle. The same 50% on a non-square element gives you an ellipse instead. For a pill shape (rounded rectangle with semicircular ends), the lazy-but-bulletproof trick is a comically large radius like 9999px, which always collapses the ends to perfect semicircles regardless of element height.

Can I have a different radius per corner?

Yes. The four-value shorthand 'border-radius: TL TR BR BL' walks clockwise from the top-left corner, so 'border-radius: 8px 8px 0 0' rounds only the top two corners. You can also reach for the long-form properties — border-top-left-radius and friends — when only one corner needs to change. The asymmetric forms are useful for things like bottom sheets, segmented dropdowns, and cards that sit flush against another surface.

What's the elliptical border-radius?

The slash syntax lets you specify horizontal and vertical radii separately. 'border-radius: 30% / 50%' produces an ellipse where the x-radius is 30% of the width and the y-radius is 50% of the height. Going further, 'border-radius: 30% 70% / 70% 30%' lets you set both axes for each corner independently — that's the recipe behind the soft blob shapes that show up in modern decorative backgrounds.

Does border-radius affect performance?

Effectively no. Modern browsers offload the rounding to the GPU compositor, so static border-radius costs nothing perceptible and you can use it as freely as you'd use a background color. The one caveat is that animating border-radius itself triggers repainting on the element, so for animation it's usually better to animate transform or opacity and leave the radius alone.

How does it interact with overflow?

By default, children of a rounded element keep their own square corners and poke out beyond the parent's curve. Adding 'overflow: hidden' to the parent clips them along the rounded shape, which is exactly what you want for rounded image containers and cards with a header image flush against the top edge. Without that overflow rule, you tend to see ugly sharp child corners sticking out where the parent has been rounded.

What about borders and outlines?

An actual CSS border respects border-radius and curves around with it. CSS outlines, on the other hand, historically render as a rectangle in some browsers regardless of how rounded the element is, which can produce a jarring visual when the focus ring snaps to a sharp box around your rounded button. The workaround is usually a box-shadow imitating the outline, since shadows respect border-radius cleanly.

Is the data sent anywhere?

No. The generator runs entirely in JavaScript inside your browser — it just turns slider input into a CSS string. Whatever values you experiment with stay on your machine, which matters when you're prototyping for a brand or product whose design language hasn't been announced.

Border Radius Generator

Generate CSS border radius values online with a visual editor. Free border radius generator with individual corner control and preview.

Generators CSS Tools

Instant results

Link all corners

Top Left

Top Right

Bottom Left

Bottom Right

Presets

CSS

border-radius: 16px;

Tailwind CSS

rounded-[16px]

About Border Radius Generator

Generate CSS border-radius values with a visual editor. Customize each corner individually or link them together. Get both standard CSS and Tailwind CSS output.

How to Use Border Radius Generator

Adjust radius values

Drag the sliders (or type into the inputs) to set either a single uniform radius for all four corners or independent radii for top-left, top-right, bottom-right, and bottom-left. The range runs from 0 for perfectly square corners through pixel values up into percentages, where 50% on a square element gives you a circle.

Configure elliptical corners (optional)

If you want a corner that's more oval than circular, switch on the elliptical mode and set the horizontal and vertical radii independently. That's how you get the soft asymmetric curves that show up in modern decorative shapes — leaves, blobs, and the gentle organic silhouettes that pure circular corners can't quite produce.

Preview the shape

The live preview updates as you adjust values, so you can see exactly what the corners will look like before you copy anything. It's worth setting the preview's background color and content to roughly match your real design — corner rounding reads quite differently against a busy card with text inside than against an empty white square.

Copy the CSS

Hit copy and paste the border-radius declaration into your stylesheet. If you've already established a design system with values like 4, 8, 12, or 16px, snap your output to one of those rungs rather than introducing a one-off radius. Consistency across components is what makes a UI feel deliberate rather than hand-tuned.

When to Use Border Radius Generator

UI element styling

Buttons, cards, modals, and form inputs all benefit from rounded corners, and the visual editor here is faster than tweaking pixel values in a stylesheet and refreshing. It's especially handy for asymmetric corners and the kinds of complex shapes that are tedious to dial in by hand.

Icon and avatar shapes

A border-radius of 50% turns a square element into a circle, while 20-25% lands you in the pleasant rounded-square territory that's become the default look for app icons. The preview makes it easy to dial in the exact shape you want for profile photos, brand marks, and image masks without a build cycle.

Custom shapes from a single property

Border-radius can do more than gentle corner rounding. Set every corner independently and you can produce pills, leaves, hand-drawn-looking blobs, and other organic silhouettes — all without dropping into SVG. The visual editor saves a lot of guess-and-check when you're chasing a specific shape.

Design system consistency

Most mature design systems define a small radius scale — say 4px, 8px, 16px, plus a fully-rounded option — and reuse it everywhere. Visualizing each step in isolation makes it easier to pick the right rung for a given component and to standardize values that would otherwise drift over time.

Border Radius Generator Examples

Standard rounded button

Input

All corners: 8px

Output

border-radius: 8px;

An 8px radius is the workhorse value of modern interfaces — it shows up in Material Design, iOS-flavored systems, and most product UIs you've used today. The element still reads as a rectangle but loses the harshness of perfectly square corners, which makes it the safest default for buttons and cards.

Pill shape

Input

All corners: 9999px (or 100%)

Output

border-radius: 9999px;

Setting border-radius to a value larger than half the element's height collapses the corners into perfect semicircles, giving you the classic pill silhouette used for status tags, badges, and friendly call-to-action buttons. Using 9999px is the lazy-but-bulletproof trick — it stays a pill at any reasonable height, while 50% only behaves correctly on a perfect square.

Asymmetric corners

Input

Top-left: 16px, Top-right: 16px, Bottom-right: 0, Bottom-left: 0

Output

border-radius: 16px 16px 0 0;

Rounding only the top two corners creates a shape that looks visually anchored to the bottom of the screen, which is exactly what you want for mobile bottom sheets, segmented dropdown menus, and cards that sit flush against another surface.

Tips & Best Practices for Border Radius Generator

1.The amount of rounding carries its own emotional weight. Subtle 4-8px corners read as modern and serious, 16-32px feels distinctly playful and consumer, and a full pill comes across as friendly. Pick a level that matches the tone you're going for.
2.Scale the radius with the element. A 16px radius on a 24px chip looks comically oversized, while the same radius on a 400px card barely registers. Larger surfaces can absorb larger radii without looking off-balance.
3.Resist the urge to invent one-off radii. A small system of three or four values (something like small, medium, large, and full) covers nearly every legitimate need, and the constraint keeps the visual rhythm of your product tight.
4.Remember that border-radius percentages are relative to the element's dimensions. 50% on a perfect square gives you a circle, but the same value on a rectangle yields an ellipse. Use percentages when you want the rounding to scale with the element and pixel values when you don't.
5.The eight-value elliptical syntax is your friend for organic shapes. 'border-radius: 50% 0' produces a clean leaf, and 'border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%' is the canonical recipe for the soft blobs that have become a staple of decorative backgrounds.
6.When you nest one rounded element inside another, give the child a slightly smaller radius than the parent. An 8px outer with a 6px inner looks much more harmonious than matching values, because the inner curve is set in from the parent's edge by whatever the padding happens to be.

Frequently Asked Questions

It's the CSS property that rounds the corners of an element. The simplest form is 'border-radius: 8px', which applies eight pixels of rounding to all four corners. It's been part of CSS3 for over a decade and works in every browser you'd care about, which is why rounded corners now show up almost everywhere — buttons, cards, modals, inputs, avatars.

Border Radius Generator

About Border Radius Generator

How to Use Border Radius Generator

Adjust radius values

Configure elliptical corners (optional)

Preview the shape

Copy the CSS

When to Use Border Radius Generator

UI element styling

Icon and avatar shapes

Custom shapes from a single property

Design system consistency

Border Radius Generator Examples

Standard rounded button

Pill shape

Asymmetric corners

Tips & Best Practices for Border Radius Generator

Frequently Asked Questions

Related Tools

Gradient Generator

Box Shadow Generator

Flexbox Generator

CSS Grid Generator

Text Shadow Generator

AI CSS Generator