CSS Border Radius Generator

Round each corner on its own or link all four, switch between px, % and em, and copy the border-radius CSS. A live box shows the shape as you drag. It runs in your browser.

This border radius generator lets you set all four corners at once or unlink them and shape each one by hand. Drag the sliders and the preview box rounds in real time, so this doubles as a css rounded corners tool when you just want a quick pill or card shape. Switch the unit between px, percent and em, then copy the border-radius line straight into your stylesheet. It is a plain corner radius maker that keeps the generated value in sync with what you see.

CSS
border-radius: 28px 28px 60px 12px;

How it works

  1. 1

    Link or unlink the corners

    Leave corners linked for one even radius, or turn linking off to control top-left, top-right, bottom-right and bottom-left separately.

  2. 2

    Drag and pick a unit

    Move each slider and switch between px, % and em. The preview box updates on every change so you can match a mockup by eye.

  3. 3

    Copy the CSS

    The border-radius declaration updates live. Copy it with one click and paste it onto your element.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

How do I round only one corner?
Turn off “Link all corners”, then set the three corners you want square to 0 and give the remaining corner a value. The border-radius css generator writes the four-value shorthand for you.
What is the difference between px and % for border-radius?
Pixels give a fixed curve regardless of the element’s size. A percentage is relative to the box’s width and height, so 50% on a square turns it into a circle. This css rounded corners tool lets you try both instantly.
How do I make a perfect circle or pill?
For a circle, use a square element and set every corner to 50%. For a pill, set the radius to at least half the element’s height in px. The live preview confirms the shape before you copy.
What order are the four values in?
The shorthand runs clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. This corner radius maker keeps that order so the copied value matches the labelled sliders.
Does the tool store or upload anything?
No. Everything is computed in your browser as you drag. Nothing is sent anywhere and nothing is saved.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.