CSS Tool · Free · No signup
Border Radius Generator
Design perfect rounded corners visually — pick a shape, tweak the sliders, copy the CSS.
1
Pick a shape
Start from a preset — then fine-tune below.
2
Fine-tune each corner
Drag the sliders or type exact values.
▸ Advanced — elliptical corners & preview options
Live preview
Preview
Your CSS code
▶ How to use this CSS in your website
A
In Elementor
Select any widget → Advanced tab → Custom CSS (Elementor Pro) → paste the code. Or use Border Radius field in the Style tab and type the values manually.
B
In your theme's Custom CSS
WordPress admin → Appearance → Customize → Additional CSS → paste. Wrap the border-radius line in a selector like
.my-button { … }.C
In your stylesheet directly
Open your
style.css or child theme CSS file. Paste the code inside your target selector. Save and clear cache.✓
Tip — the shorthand order
When four values are shown, the order is top-left, top-right, bottom-right, bottom-left (clockwise from top-left). If all four match, browsers accept just one value.
