Border Radius Generator
Visually tweak CSS border-radius. Adjust all four corners individually, pick from presets, or lock to a circle / pill. Copy the produced border-radius value straight into your stylesheet.
Processed in your browser · No upload
Loading tool…
Sliders live in your browser; nothing is uploaded.
FAQ
- Can I set different radii per corner?
- Yes — unlock 'all' to expose top-left, top-right, bottom-right, and bottom-left sliders independently.
- When does border-radius: 50% become a perfect circle?
- When the element is a square (equal width and height). 50% produces a pill on a rectangle and a circle on a square.
- What's the syntax for individual corners?
- CSS uses clockwise-from-top-left ordering: top-left, top-right, bottom-right, bottom-left — the same as the four sliders.
Related Tools
Box Shadow Generator
Design CSS box-shadow values visually in your browser. Adjust offset, blur, spread, color, and inset for soft elevation, hard drop shadows, or material-style depth.
Color Converter
Convert any color between HEX, RGB, HSL and HSV — all in your browser. Use the color picker, see live previews, and copy values to use in CSS, design tools, or code.
CSS Gradient Generator
Build CSS linear and radial gradients in your browser. Adjust angle, color stops, and copy a clean, vendor-prefix-free snippet that's ready to paste into stylesheets.
Contrast Checker
Check WCAG 2.x color contrast between foreground and background colors. See the contrast ratio, AA / AAA pass/fail for normal and large text, and live-preview a sample sentence.