Border Radius Generator
Generators & QR · Done in 3 steps
- 1Pick units and preset
- 2
- 3
About
Shape boxes with per-corner CSS border-radius, including the 8-value elliptical syntax for blobs, leaves and eggs. Live preview, shortest CSS.
How to use it
- 1Pick px or % and a preset, or start from scratch.
- 2Drag each corner’s slider, or tick “Same for all corners”.
- 3Turn on elliptical corners to set horizontal and vertical radii separately.
- 4Copy the CSS. It is automatically shortened to the minimal shorthand.
- You give
- Corner radii in px or %
- You get
- CSS border-radius declaration
- Good to know
- Values are capped at 200 px or 100% in the editor. If corner radii add up to more than the box size, browsers scale them down proportionally, so the preview shows the real result.
- Privacy
- Processed on your device. Nothing is uploaded, stored or logged.
- Last tested
- 2026-10-28
FAQ
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after are vertical radii, each listed top-left, top-right, bottom-right, bottom-left. Different values make elliptical corners.
Go further with AI
Content calendar workflow
Plan a month of content from goals and pillars, with formats per channel, a realistic cadence and a production schedule you can actually keep.
ChatGPT · Claude · Gemini
Customer interview synthesis
Turn interview transcripts into evidence-backed themes, jobs-to-be-done statements and opportunities, with quotes and counts rather than vibes.
Claude · ChatGPT · Gemini
Competitor comparison worksheet
Compare competitors on criteria buyers actually use, with evidence for every cell and an honest view of where you win and lose.
ChatGPT · Claude · Gemini
Landing page critique
Get a prioritised, conversion-focused critique of a landing page's copy and structure, judged from the point of view of the visitor you're paying for.
ChatGPT · Claude · Gemini