CSS Border Radius Generator Color
Shape corners individually and copy the border-radius CSS.
CSS Border Radius Generator is a free online tool that shape corners individually and copy the border-radius CSS. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free — no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 4
- Works offline
- Yes, after the first visit
About CSS Border Radius Generator
CSS Border Radius Generator is one of 14 color tools on DuckyTools, and like all of them it runs entirely inside this page. Shape corners individually and copy the border-radius CSS.
How to use it
- Enter top left, top right and bottom right.
- Adjust the remaining 1 setting if the defaults do not fit your case.
The 4 settings
| Setting | What it does | Default |
|---|---|---|
| Top left | Range 0–100px. | 18px |
| Top right | Range 0–100px. | 18px |
| Bottom right | Range 0–100px. | 18px |
| Bottom left | Range 0–100px. | 18px |
Under the hood
| Runs on | plain JavaScript — runs the whole thing |
| Controls | Top left, Top right, Bottom right, Bottom left |
Questions
What are the limits on top left?
It accepts 0 to 100px, starting at 18px. The other numeric controls have their own ranges: top right 0–100px, bottom right 0–100px, bottom left 0–100px.