Border Radius Generator
Round corners visually with independent controls for all four corners. Use pixels or percent, preview live and copy the border-radius CSS. Free.
All processing happens locally in your browser. Files are never uploaded.
Generated CSS
border-radius: 16px 16px 16px 16px;
Introduction
Border Radius Generator makes it easy to design rounded corners. Adjust each of the four corners independently, switch between pixels and percent, and see a live sample update as you drag. The finished border-radius declaration is one click away from your stylesheet.
Features
- Control all four corners independently
- Switch between pixels and percent
- Live preview of the rounded box
- Limits values to valid ranges
- Copy the ready-to-use CSS
How to use
- 1Choose pixels or percent as the unit.
- 2Drag the sliders for top-left, top-right, bottom-right and bottom-left.
- 3Watch the preview box reshape in real time.
- 4Copy the generated border-radius CSS declaration.
Frequently asked questions
Related tools
Box Shadow Generator
Design CSS box shadows visually. Tune offset, blur, spread and color, toggle inset shadows, preview live and copy the CSS. Free and private.
Color Picker
Pick colors with a native color wheel and instantly convert between HEX, RGB and HSL. Copy any value with one click. Free, private, runs in your browser.
CSS Gradient Generator
Build beautiful linear and radial CSS gradients. Add color stops, tune the angle, preview live and copy the ready-to-use CSS. Free, private, browser-based.