CSS Border Radius Generator
Shape corners individually and generate border-radius CSS.
5.0 (1 rating)Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Border Radius Generator
Set individual corner radii in pixels or percentages.
- 1 Choose Unit and whether all corners should share the same value.
- 2 Adjust Top left, Top right, Bottom right and Bottom left.
- 3 Copy the border-radius CSS and test it on an element of your intended size.
Example and practical tips
Use matching 12px corners on a rectangular card, then unlink them to create an asymmetric shape.
Frequently asked questions
Why do percentage corners look different on a rectangle?
Percentage radii depend on the element dimensions, so horizontal and vertical curvature can differ.
Will rounded corners clip child content automatically?
Not always. You may need appropriate overflow rules on the actual element, depending on your layout.
Practical guides
-
How to Use CSS Border Radius Generator
Generate CSS border-radius code visually. Set each corner in pixels or percent, preview the shape live and copy the CSS. Free border radius generator.
Report an issue
Something broken or not quite right? Tell us and we will look into it.