CSS Border-Radius Generator — Free Online Tool
Build CSS border-radius values visually. Control each of the four corners independently or link them together. Supports px and % units. Live preview shows the result on a card. Common presets: rounded card, pill, circle, top rounded, speech bubble.
100% client-side. No uploads. Your data never leaves your browser.
How to use CSS Border-Radius Generator
- Adjust corner sliders or enter values directly.
- Toggle 'Link corners' to set all at once.
- Switch between px and % units.
- Copy the generated CSS and paste it into your stylesheet.
Frequently Asked Questions
What is the shorthand for equal corners?
If all four corners are equal, CSS shorthand is: border-radius: 8px. If two pairs match (top-left=bottom-right, top-right=bottom-left), use 2-value shorthand.
What does % do for border-radius?
Percentage values are relative to the element's dimensions. 50% on a square creates a perfect circle.
Can I create asymmetric border-radius?
Yes. CSS also supports horizontal/vertical radius notation using / but this generator covers the standard shorthand.
Related tools
Related reading
Browse all free tools · theproductguy.in