FreeQ.One
Back to Tools

Border Radius Generator

Top-Left16px
Top-Right16px
Bottom-Right16px
Bottom-Left16px

Generated CSS

border-radius: 16px 16px 16px 16px;

About This Tool

Border radius is a CSS property that rounds the corners of an element's outer border edge. With this visual border radius generator, you can adjust each corner independently — top-left, top-right, bottom-right, and bottom-left — and see the result in real time. The generated CSS code is ready to copy directly into your stylesheet.

Fine-tuning border radius is essential for modern UI design. Whether you're creating pill-shaped buttons, rounded cards, or circular avatars, the border-radius property gives you precise control over corner curvature. This tool supports independent corner values, a linked mode for uniform rounding, and URL-based preset sharing so you can save and revisit your designs.

Common Use Cases

  • Designing rounded buttons, cards, modals, and input fields for web and mobile UIs
  • Creating circular avatars, badges, and logo containers with uniform corner rounding
  • Prototyping UI components with different corner treatments — pill, rounded, or square
  • Generating CSS for production-ready components with minimal manual code writing
  • Sharing border-radius presets with teammates via URL parameters

Pro Tips

  • Use the link/unlink toggle to control all corners together or adjust each independently for custom shapes
  • Values above 50% of an element's smallest dimension create a fully rounded pill or circle shape
  • Save your favorite corner configurations by bookmarking the generated URL — all values are stored in the query string
  • For responsive designs, consider using relative units (em/rem) converted to px equivalents via this tool

Frequently Asked Questions

What is the CSS border-radius property?
The border-radius CSS property rounds the corners of an element. You can specify one, two, three, or four values to control different corners. With this generator, the format is: border-radius: top-left top-right bottom-right bottom-left;.
How do I make a perfect circle with border-radius?
Set all four corner values to 50% of the element's width or height (whichever is smaller). For a square element, setting all corners to 50px (when the element is 100px × 100px) creates a perfect circle. In practice, using a value greater than half the element size also produces a circle.
Can I use different border-radius values on different corners?
Yes. Unlink the corners using the toggle button and adjust each slider independently. The CSS output shows all four values in order: top-left, top-right, bottom-right, bottom-left. You can also use two-value shorthand (border-radius: 10px 20px; — top-left+bottom-right / top-right+bottom-left).
Is this border radius generator free to use?
Yes, it is completely free with no sign-up required. All processing happens in your browser — nothing is uploaded to any server. You can also share your designs with teammates via the URL, which encodes all four corner values.

Part of the FreeQ.One tools suite.