Border Radius Generator

What Is the Border Radius Generator?

This tool builds a CSS border-radius declaration with independent control over all 4 corners -- useful for asymmetric rounding (like a speech-bubble or blob shape) as well as the common uniform-rounding case.

How to Use This Tool

Set a pixel value for each of the 4 corners (top-left, top-right, bottom-right, bottom-left). The preview and generated CSS update instantly, automatically collapsing to a single value when all 4 corners match.

How Border Radius Values Work

Practical Uses

• Building a uniformly rounded card or button
• Creating an asymmetric rounded shape, like a speech bubble or organic blob
• Quickly previewing different corner-rounding combinations

For other CSS visual generators, see the CSS Triangle Generator or Box Shadow Generator.

How the Tool Behaves

All four corners start at 16 pixels, so the first output is the collapsed form border-radius: 16px; The output only stays in that single-value form while every corner is identical. As soon as one corner differs, the tool writes four values in order: top-left, top-right, bottom-right, bottom-left. The tool's corner inputs are labelled in pixels and accept zero or higher. Blank or non-numeric fields are treated as 0 rather than producing an error.

A Worked Example

Suppose you want a hypothetical chat bubble that looks like it belongs to the sender on the right. Set top-left 20, top-right 20, bottom-right 4 and bottom-left 20. The output is border-radius: 20px 20px 4px 20px; The small bottom-right value creates the pointed corner where the message appears to come from, while the other three corners stay generously rounded. Flip it by moving the small value to bottom-left for the other side of a conversation. Using clearly different values for a leaf shape, for example 0 on top-left and bottom-right and 40 on the others, gives an organic, petal-like block.

How Rounding Interacts with Size

• If the sum of two adjacent radii is bigger than the side they share, browsers scale all radii down proportionally so they fit. So a radius of 200px on a 100px tall box does not become bigger than the box; it is reduced automatically.
• That is why a very large pixel value, such as 9999px, is a well-known way to get a pill shape on any width without calculating it.
• Equal radii on a square element with a value of half the side length (or 50%) produce a circle.
• Rounding also clips the element's own background and border, but not necessarily its children. Add overflow hidden to the parent if inner content such as an image should follow the curve.

Pixels Versus Percentages

This tool always writes pixel values. Percentages are relative to the element's own width and height, so a percentage-based radius on a non-square element creates elliptical corners. If you need that, take the generated line and edit the units by hand. Pixel values remain constant as the element resizes, which is usually what you want for buttons, cards and inputs so their corner style stays consistent across sizes.

Design Tips

• Pick a small scale of radii and reuse it, for instance one for inputs, one for cards and one for modals. Mixed random values feel inconsistent.
• Nested rounded elements look best when the inner radius is roughly the outer radius minus the padding between them, so the curves appear concentric.
• Check that rounded corners do not clip important content such as text at the edge of a tight box.

Limits

The generator does not create the slash syntax for separate horizontal and vertical radii per corner, and it does not output longhand properties such as border-top-left-radius. It provides one uniform unit for all four corners and the shorthand result only.

Frequently Asked Questions