Border Radius Generator
Design ToolsMake rounded corners and blobs in CSS
Embed this tool on your websiteFree
- Choose how tall the frame should be.
- Press Copy code.
- Paste it into your page, blog, WordPress or Notion HTML block.
The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.
Similar tools you may like
History
All history →Border Radius Generator — at a glance
Shape rounded boxes, pills and blobs and copy the CSS.
How to use it — step by step
Set the radius of each corner and choose px or %.
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
Generate CSS
Press the button. The answer is worked out instantly on your device.
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
Quick facts
Frequently Asked Questions
In which order are the corners written?+
Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left.
px or %?+
Pixels give a fixed curve. Percent scales with the size of the element.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.