Generate CSS border radius
Design rounded corners visually: set each corner separately, link them, choose px, % or rem, preview the shape and copy the CSS. Free, in your browser.
- Files never leave your device
- Free, no sign-up
- No watermark
About Border Radius Generator
Shape cards, buttons, avatars and blobs with precise rounded corners. Adjust each corner with a slider or type exact values, link all four corners to change them together, pick your unit and preview the shape instantly. Then copy the border-radius CSS. Using percentages lets you create pill shapes, circles and organic blobs.
How to use Border Radius Generator
- 1
Adjust the corner sliders or type values.
- 2
Link corners to change them together, or unlink them.
- 3
Pick px, %, rem or em.
- 4
Copy the CSS.
Why use this tool
- Individual or linked corner control.
- px, %, rem and em units.
- Live shape preview.
- Great for pills, circles and blob shapes.
- Copy-ready CSS.
Frequently asked questions
Give the element equal width and height and set border-radius to 50%.
Use a very large radius such as 9999px so the ends are fully round.
rem scales with the user’s font size, which keeps rounded corners proportional in accessible layouts.
Add overflow: hidden to the container so child images follow the rounded corners.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Border Radius Generator gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Neumorphism GeneratorCreate soft UI neumorphic effects with light and dark shadows: flat, concave, convex or pressed shapes.
- Glassmorphism GeneratorCreate frosted glass UI effects with adjustable blur, opacity, saturation and borders, previewed on a vivid background.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.
- CSS Animation GeneratorBuild CSS @keyframes animations visually: add keyframes with transforms and opacity, set timing and easing, preview live and copy the CSS.