Skip to content
Design · undefined

Border Radius Generator

Visually adjust rounded corners for any element. Copy CSS shorthand, longhand, Tailwind classes, or a custom property — all computed in your browser.

In-browser only Simple / Advanced / Blob Shareable URL

200 × 200 px

Same on all sides
Unit
Corners
Preview element
Size (px)
Border
Background
border-radius: 0px;

All processing in-browser. Nothing uploaded.

Getting started

How to Use the Border Radius Generator

  1. 1
    Choose a mode

    Select Simple for equal-corner rounding, Advanced for per-corner elliptical control, or Blob for freeform organic shapes using percentage values.

  2. 2
    Adjust the corner sliders

    Drag a slider or type a value directly into the number input beside it. In Simple mode, toggle "Same on all sides" to link all four corners to one value.

  3. 3
    Preview in real time

    The element on the left updates instantly as you move any control. Resize it with the Size inputs, and style its border and background in the controls pane.

  4. 4
    Pick a preset

    Use the Preview element buttons to jump to sensible defaults for a Button, Card, Avatar, Image, or Input — then fine-tune from there.

  5. 5
    Select your output format

    Choose Shorthand, Longhand, Tailwind classes, or a Custom property. The code block updates immediately.

  6. 6
    Copy and share

    Click Copy CSS to put the generated code on your clipboard. Click Share to copy a URL that encodes all your current settings.

CSS Reference

CSS Shorthand Rules

CSS Shorthand Rules
ValuesMeaningExample
1 valueAll four corners equalborder-radius: 8px
2 valuesTL+BR first, TR+BL secondborder-radius: 8px 4px
3 valuesTL, TR+BL, BRborder-radius: 8px 4px 12px
4 valuesTL, TR, BR, BL (clockwise)border-radius: 8px 4px 12px 2px

Frequently Asked Questions

What is border-radius in CSS?
The CSS border-radius property rounds the corners of an element. You can set a single value to round all four corners equally, or set individual values per corner for asymmetric shapes. Percentage values create ellipse-shaped curves that adapt to the element's dimensions.
What is the difference between Simple, Advanced, and Blob modes?
Simple lets you set one radius per corner (optionally linked). Advanced gives each corner an independent horizontal and vertical radius, producing elliptical arcs. Blob generates freeform organic shapes using percentage values, with a Randomise button for quick exploration.
How does the Tailwind output work?
Values that match the Tailwind v3/v4 scale (0, 2, 4, 6, 8, 12, 16, 24, 9999 px) are mapped to named classes like rounded-lg. Non-standard values use arbitrary syntax: rounded-[5px]. Elliptical (Advanced) mode cannot be represented in Tailwind's utility classes, so the CSS shorthand is shown instead.
Can I share my settings with someone else?
Yes. Click the Share button and the full URL — including all your current settings — is copied to your clipboard. Anyone who opens that URL will see the same configuration.
What does the Smoothness slider do in Blob mode?
Smoothness adds a subtle cosmetic wave to the preview element only — it makes the shape look more organic. It does not affect the generated CSS output, which always uses the raw corner percentage values.
What happens when corner radii overlap?
If the sum of two adjacent corner radii exceeds the element's edge length, the browser automatically scales all radii down proportionally. The tool shows a warning when this condition is detected so you can adjust your values.