JSON Formatter
Beautify, minify and validate JSON with precise error locations.
Border Radius Generator
Shape corners individually, including the elliptical slash syntax.
Horizontal radii
Vertical radii (elliptical mode)
Preview
Quick Tool Overview
The Border Radius Generator shapes each corner independently and exposes the elliptical slash syntax, which is how the organic blob shapes are made — eight values, no SVG and no images.
- What it does
- Builds border-radius, including elliptical corners
- You give it
- A radius per corner, in pixels or percent
- You get back
- The shortest declaration that makes the shape
- Best for
- Cards, pills, avatars and organic blob shapes
About the Border Radius Generator
border-radius looks simple until you need the corners to differ, and then the shorthand becomes hard to read. This shapes each corner with a slider and writes the shortest declaration that produces it.
The second half of the property is where the interesting shapes are. A slash separates the horizontal radii from the vertical ones, so each corner can be an ellipse rather than a circle. That is how the organic blob shapes are made — eight values, no SVG and no images. The generator exposes both halves, has a randomise button for blobs, and always shows the collapsed shorthand alongside the full form so you can see what it reduces to.
Key features of the Border Radius Generator
The slash syntax exposed
Separate horizontal and vertical radii turn each corner into a quarter ellipse, which is the whole basis of blob shapes.
Shorthand collapsed
The output is the shortest form that produces exactly this shape, not four values where one would do.
Randomise for blobs
Eight uneven percentage radii produce the organic shapes that are tedious to hand-tune.
Pixels or percent
Pixels for a consistent corner, percent for a curve that scales with the box.
Overlap explained
When radii would overlap the browser scales them all down proportionally, which is why a radius sometimes looks smaller than it was set.
How to use the Border Radius Generator
-
1
Drag the corners
Each corner has its own slider, in pixels or percent.
-
2
Turn on elliptical mode
A second set of radii after a slash makes each corner an ellipse.
-
3
Randomise for a blob
Organic shapes come from eight uneven percentage radii.
-
4
Copy the shorthand
The shortest form that produces exactly this shape.
Frequently asked questions
It separates horizontal radii from vertical ones. Without it each corner is a quarter circle; with it each corner is a quarter ellipse, which is how organic blob shapes are made.
Pixels for a consistent corner whatever the element size. Percent when the curve should scale with the box — and 50% on all corners is how you make a circle or an oval.
Because when adjacent radii would overlap, the browser scales every radius down proportionally. A 100px radius on a 120px-wide box is reduced to fit.
border-radius: 50% on an element with equal width and height. On an unequal box the same value gives an ellipse, which is often what you actually want.
Reviews of the Border Radius Generator
What people who use the Border Radius Generator think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Border Radius Generator. It takes half a minute and no account.
Write the first reviewMore developer tools
JSON Sorter
Sort JSON object keys alphabetically at every level, or sort arrays by a field.
Bcrypt Generator
Hash a password with bcrypt, or check one against an existing hash.
String Byte Counter
Measure text in UTF-8 bytes, code points, UTF-16 units and graphemes.
Password Generator
Strong random passwords and passphrases, generated locally.
SQL Formatter
Re-indent a SQL query into readable clauses, joins and conditions.
CSV to Markdown Table
Convert CSV or a spreadsheet paste into a padded Markdown table.
IBAN Validator
Validate an IBAN's length, country and mod-97 checksum, and generate test ones.