Skip to content

Border Radius Generator

In-browser only Simple / Advanced / Blob Shareable URL
Unit
Corners
Preview element
Size (px)
Border
Background

200 x 200 px

border-radius: 0px;

All processing in-browser. Nothing uploaded.
Related tools View all

Overview

Round corners visually and copy the CSS

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

  • Simple, Advanced (elliptical), and Blob shape modes
  • Live split-pane preview with adjustable size and style
  • CSS shorthand, longhand, Tailwind, and custom-property output
  • Shareable URL — every setting encoded in the link
  • Runs entirely in your browser
  • Runs entirely in your browser — nothing is uploaded
  • No design data is sent to any server
  • Runs in your browser — nothing is uploaded
  • Round button and card corners and copy the CSS
  • Create pill or capsule shapes with a high radius
  • Design organic blob shapes for decorative containers
  • Match a design-system corner radius across components
  • Copy ready-to-use border-radius CSS in any format

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 preview 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. The page URL updates automatically as you adjust settings — copy or bookmark it to share the exact configuration.

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 Randomize 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. In Blob mode, elliptical corners become a single arbitrary class such as rounded-[60%_40%/40%_60%].
Can I share my settings with someone else?
Yes. The page URL updates automatically to encode all your current settings (look for the Shareable URL badge). Copy the address bar or bookmark the page, and anyone who opens that link sees the same configuration.
What does the Smoothness slider do in Blob mode?
Smoothness skews each corner into an ellipse — the horizontal radius grows while the vertical one shrinks — for a more organic shape. The generated CSS includes it (using the H / V slash form), so what you see in the preview is exactly what you copy. Set Smoothness to 0 for circular corners.
What happens when corner radii overlap?
If the sum of two adjacent corner radii is greater than the element's edge length, the browser automatically scales all radii down proportionally. A sum of exactly 100% (for example 100px + 100px on a 200px edge) still renders as drawn. The tool shows a warning only when scaling will actually happen.