CSS Border Radius Generator
Generate border-radius with visual preview
CSS Border Radius Generator is a free online tool from BrowserUtils that generate border-radius with visual preview. It runs entirely in your browser — your data never leaves your device. No account required.
border-radius: 20px 20px 20px 20px;
How to use CSS Border Radius Generator
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
About CSS Border Radius Generator
Free online CSS border-radius generator. Set individual corner radii with a visual preview and copy the CSS code. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
CSS Border Radius Generator specs
- Runtime
- 100% client-side (browser)
- Built on
- CSS Color Module Level 4 conversions (sRGB, OKLCH, OKLAB) and native CSSOM parsing
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
Can I set different radii for each corner?
Yes, you can independently control the top-left, top-right, bottom-right, and bottom-left border radii.
What units does the border-radius use?
The generator uses pixel (px) values, and you can also toggle percentage (%) mode for elliptical shapes.
How do I make a circle with border-radius?
Set border-radius to 50% on a square element. The generator can produce this value, and the live preview shows the resulting shape instantly.
Can I create a pill shape with border-radius?
Yes, set a large border-radius value (e.g., 9999px) on a rectangular element. The corners will round fully, creating the classic pill or capsule shape used for buttons and tags.
Comments
Related tools
More CSS & Design
Color ConverterCSS Gradient GeneratorBox Shadow GeneratorPX to REM ConverterColor Palette GeneratorColor Contrast CheckerTailwind Color PickerCSS Animation Generator
View all CSS & Design tools
Comments