CSS Border Radius Generator

Visually design standard or fancy organic CSS border-radius shapes and copy the generated code.

Top-Left Corner (X): 30%
Top-Right Corner (X): 70%
Bottom-Right Corner (X): 70%
Bottom-Left Corner (X): 30%
Fancy Shape Presets
CSS Code Output
border-radius: 30% 70% 70% 30%;
All Corners Uniform (Tailwind CSS)
rounded-[30%_70%_70%_30%]
16.711 viewsYour data is processed in your browser and never sent to a server.

Related tools

JSON Formatter
Validate, beautify and minify JSON online. Everything runs in your browser — free and private.
Base64 Converter
Encode or decode Base64 text instantly in your browser. Free and private.
URL Encoder
Encode or decode URLs and query strings instantly in your browser. Free and private.
Color Picker
Pick any color and instantly get its HEX, RGB and HSL codes for CSS and design tools. Free, private, runs in your browser.

Get to know this tool

CSS Border Radius Generator lets you shape every corner of a box independently and see the result update live as you drag. Adjust the horizontal and vertical radius of each of the four corners, then copy the ready-made border-radius CSS declaration. Everything runs locally in your browser — nothing is uploaded anywhere.

What is the CSS Border Radius Generator and Why is it Useful?

The CSS border-radius property can take up to eight separate values — a horizontal and a vertical radius for each of the four corners — using the / shorthand syntax. Writing this by hand and predicting how it will actually look is tedious. This tool gives you eight sliders (one horizontal and one vertical control per corner), renders a live preview box, and generates the exact, valid CSS for you, so designers and developers can dial in shapes like leaf curves, blobs, or asymmetric rounded cards without guesswork.

Key Features

  • Per-Corner Control: Each of the four corners (top-left, top-right, bottom-right, bottom-left) has its own horizontal and vertical radius slider, for full elliptical corner shaping.
  • Live Visual Preview: A preview box updates instantly as you move any slider, reflecting the exact CSS that will be generated.
  • Valid, Ready-to-Use CSS: The output uses the correct border-radius shorthand order (top-left top-right bottom-right bottom-left) with the standard / separator for the vertical radii, so you can paste it directly into your stylesheet.
  • Fully Offline and Private: All calculations happen in your browser. No values are ever sent to a server.
  • No Sign-up Required: Open the page and start adjusting sliders immediately — no installation, no account.

How to Use This Tool?

  1. Drag the four sliders under "Horizontal radius" to set how rounded each corner is from left to right.
  2. Drag the four sliders under "Vertical radius" to set how rounded each corner is from top to bottom (this creates elliptical corners when different from the horizontal value).
  3. Watch the preview box update live to match your settings.
  4. Copy the generated border-radius CSS code from the text box and paste it into your stylesheet.

Why Choose Our Client-Side Tool?

Many online CSS generators are cluttered or send your design choices through a server for no real reason. This tool computes and renders everything directly in your browser using plain CSS, so it works instantly, requires no network round-trip, and never stores or transmits your design data.

Frequently Asked Questions (FAQ)

Does this tool support elliptical (non-circular) corners?

Yes. Each corner has an independent horizontal and vertical radius, so you can create elliptical corners, not just simple rounded ones.

What units does the generator use?

All radius values are expressed in percentages, which scale naturally with the element's own width and height.

Can I enter negative radius values?

No. border-radius does not accept negative values in CSS, so each slider is limited to a 0–100% range.

Is my design data uploaded anywhere?

No. The generator runs entirely in your browser; no values are sent to any server.