Design tool
Border Radius
Enter one radius, or four numbers for the corners, then copy the CSS.
Processed in your browser. The text is not sent to our servers.
How to set a border radius
- Enter one number to round every corner, or four numbers for the top-left, top-right, bottom-right, and bottom-left.
- Click Build radius and check the preview.
- Copy the border-radius property.
12 rounds every corner by 12 pixels. 8 8 0 0 rounds only the top corners.
Frequently asked questions
What units are used?
Pixels, from 0 to 400.
Is the CSS uploaded?
No. The preview and the property are created in your browser.
Related design tools
Keep working without leaving the site.
Color converter
Switch a color between HEX, RGB, and HSL.
Open toolContrast checker
See whether two colors pass WCAG AA and AAA.
Open toolPX and REM
Convert pixels to rem, or rem back to pixels.
Open toolCSS gradient
Build a linear or radial gradient and copy the CSS.
Open toolBox shadow
Preview a box-shadow and copy the CSS property.
Open toolTints and shades
Build lighter and darker steps from one hex color.
Open toolAspect ratio
Simplify a width and height, or find the missing side.
Open tool