What is Border Radius Generator?
Border Radius Generator is a free visual tool for creating CSS border-radius values with a live preview. The CSS border-radius property controls the roundness of an element's corners and is one of the most commonly used properties in modern web design. It accepts one to four values for individual corner control, supports both pixel and percentage units, and offers an advanced 8-value syntax for setting different horizontal and vertical radii on each corner. This creates everything from simple rounded rectangles to complex organic blob shapes used in modern UI design.
How to Use This Tool
Use the sliders or number inputs to adjust each corner's radius. Toggle "Linked" mode to change all corners at once, or unlink them for individual control. Switch between pixel and percentage units. Choose a preset shape like Pill, Circle, Leaf, or Drop to start with a common pattern. Enable Advanced mode to set separate horizontal and vertical radii for each corner, unlocking the full 8-value CSS syntax. Customize the preview color and dimensions to match your design. The CSS code updates in real time and can be copied with one click.
Common Use Cases
- Designing rounded buttons, cards, and input fields for consistent UI components
- Creating pill-shaped tags, badges, and navigation elements
- Building organic blob shapes for decorative backgrounds and hero sections
- Generating circular avatars and profile picture containers
Why Use a Client-Side Tool?
All calculations and preview rendering happen entirely in your browser. No data is sent to any server, there is no account required, and the tool works offline after the page loads. The generated CSS is a single standard property that works in all modern browsers without any vendor prefixes. You can use the output with any CSS framework or methodology.
Frequently Asked Questions
What is the difference between px and % units for border-radius?
Pixel values create a fixed curve size regardless of the element dimensions. Percentage values are relative to the element's width (for horizontal) and height (for vertical). Using 50% on a square element creates a perfect circle, while 50% on a rectangle creates an ellipse. Percentages are more flexible for responsive designs.
What does the advanced 8-value syntax do?
The standard border-radius accepts up to 4 values for each corner. The advanced syntax uses a slash separator to define 4 horizontal radii and 4 vertical radii independently. This allows each corner to have an elliptical curve rather than a circular one, enabling organic shapes like teardrops and blobs that are popular in modern design.
Is border-radius supported in all browsers?
Yes. The border-radius property has been supported in all major browsers for over a decade, including Chrome, Firefox, Safari, and Edge. No vendor prefixes like -webkit- or -moz- are needed for any current browser version. The advanced slash syntax is also universally supported.