Categories
CSS Border Radius Generator
Generate a CSS border-radius value by specifying the radius of each corner.
Overview
Generates the CSS border-radius property just by specifying the radius of each corner (top-left, top-right, bottom-right, bottom-left).
Lets you adjust the radius while checking the rounded corners' appearance on the spot in a preview.
Generates a single-value shorthand (e.g. `border-radius: 8px;`) when all corners are equal, or a four-value shorthand (e.g. `border-radius: 8px 16px 24px 32px;`) when they differ.
Usage
- 1
With "Link all corners" enabled, entering "Top-left (px)" applies the same value to all four corners.
- 2
To set a different value per corner, disable "Link all corners" and enter each corner's value individually.
- 3
Click "Generate CSS" to display a preview and the generated CSS (including border-radius).
Example
Input
Top-left 8px / top-right 16px / bottom-right 24px / bottom-left 32px
Output
border-radius: 8px 16px 24px 32px;
Use Cases
Adjusting the border-radius value used for UI elements such as cards, buttons, or modals while checking a preview
Building CSS for asymmetric rounded corners, such as a speech-bubble shape
Converting a border-radius value specified in a design mockup directly into a CSS property
FAQ
Does this support elliptical rounded corners (different horizontal and vertical radii)?
No. This tool only generates circular rounded corners (the same radius horizontally and vertically). If you need elliptical corners, manually edit the generated CSS using slash notation, such as `border-radius: 8px / 16px;`.
What is the range for the corner radius?
You can specify an integer between 0 and 500px.
Can I specify a percentage instead of px?
This tool only supports the px unit. If you need a percentage, manually rewrite the numeric part of the generated CSS.
Notes
The corner radius can be specified in the range of 0 to 500px.
Only circular rounded corners (the same radius horizontally and vertically) are generated. For elliptical corners, edit the generated CSS manually.
Related Tools
Generate a CSS box-shadow by specifying offset, blur, and color.
Generate CSS Grid styles from column count, row count, and gap.
Generate CSS Flexbox styles for the container and each item while watching a live preview.