Border Radius Generator
Generate CSS border-radius visually.
How to use Border Radius Generator
Open the Border Radius Generator interface
Navigate to the tool and locate the square preview box in the center of the screen. You'll see four corner radius sliders labeled 'Top Left', 'Top Right', 'Bottom Right', and 'Bottom Left' on the right panel.
Adjust corner radius values using sliders or input fields
Drag any of the four corner sliders left to right (0-100px range) or type exact pixel values directly into the input fields. Watch the preview box update in real-time as you modify each corner independently.
Toggle between uniform and individual corner controls
Click the 'Uniform' toggle button to apply the same radius to all four corners at once, or leave it unchecked to customize each corner separately for asymmetrical designs.
Preview the CSS code output
View the generated CSS code in the code panel below the preview. The code automatically updates and displays the border-radius property with your custom values in standard CSS format.
Copy the CSS code to your clipboard
Click the 'Copy Code' button located beneath the CSS output panel. A confirmation message will appear confirming the code has been copied and is ready to paste into your stylesheet.
Related Tools
Border radius generator: create rounded corners visually and copy the CSS
Border radius generator: create rounded corners visually and copy the CSS
Need to style rounded corners for a button, card, or image? ToolHQ's Border Radius Generator gives you visual sliders for all four corners, a live preview, and instant CSS output. Free, no account required.
ToolHQ's Border Radius Generator is a free browser-based tool that generates CSS border-radius values visually, with independent control over each corner, a live preview, and one-click CSS copy.
Rounded corners are one of the most common CSS styling decisions. Whether you're creating a subtle card border, a pill-shaped button, or an asymmetric shape, getting the exact values right by typing numbers in a text editor is slow. A visual generator gets you to the result in seconds.
Key Takeaways
- Control all four corners independently with visual sliders
- Live preview shows exactly how the element will look as you adjust
- Generates the full CSS border-radius property ready to paste
- Runs entirely in your browser, no code is sent anywhere
- Free, no account required, works on any device
How CSS border-radius works
The CSS border-radius property controls the curvature of an element's corners. According to MDN's border-radius documentation, the property accepts one to four values that apply to the top-left, top-right, bottom-right, and bottom-left corners in that order.
The shorthand:
- One value:
border-radius: 8px;applies the same radius to all four corners. - Two values:
border-radius: 8px 16px;applies 8px to top-left and bottom-right, 16px to top-right and bottom-left. - Three values:
border-radius: 8px 16px 24px;, top-left, top-right/bottom-left, bottom-right. - Four values:
border-radius: 8px 16px 24px 32px;, each corner individually, clockwise from top-left.
You can also use percentage values to create circular or oval shapes. border-radius: 50% on a square element creates a perfect circle. border-radius: 50% on a rectangle creates an oval.
According to the W3C CSS Backgrounds and Borders specification, each corner can also accept two radius values separated by a slash (/), defining the horizontal and vertical radii independently for elliptical corners. This enables organic, asymmetric shapes.
ToolHQ's generator handles all of these cases visually: sliders for each corner, toggles to link corners together or control them independently, and CSS output that matches exactly what you see in the preview.
When to use a border radius generator
A border radius generator is most useful for intermediate and non-standard corner values. If you need border-radius: 8px for a simple card, you can just type it. But these situations benefit from a visual tool:
Asymmetric rounding: When you want different corner values for a specific design effect, like a shape that's rounded on the top but flat on the bottom.
Pill buttons and badges: A border-radius: 9999px creates a pill shape, but you may want to verify how it looks at different element heights.
Organic shapes: Using the horizontal/vertical radius syntax creates non-circular curves that can look more natural for decorative elements.
Fast iteration: When a designer hands you a comp with a specific corner radius and you want to match it exactly and quickly.
Mini-story: In May 2025, Ravi, a frontend developer in Bengaluru, was building a design system for a healthcare SaaS product. The design spec called for card components with different border radius values on different corners to reflect the product's brand aesthetic: heavily rounded on the top corners, gently rounded on the bottom. He used ToolHQ's Border Radius Generator to quickly test different value combinations with live preview. Within ten minutes, he had the exact CSS values for three card variants, copied them directly into the design system's token file, and moved on. What he'd estimated as a 45-minute task took 15.
Generate your border radius CSS now, free, in your browser
How to use ToolHQ's border radius generator: step by step
Generating your border-radius CSS takes under a minute.
- Open the tool. Go to https://www.toolhq.app/tools/border-radius-generator. No login required.
- Adjust the corner sliders. Each of the four corners has an independent slider. Drag the slider to increase or decrease the radius for that corner. You can also type a specific pixel value.
- Link corners if needed. Many generators have a lock icon or toggle to apply the same value to all corners simultaneously. Use this for uniform rounding.
- Preview the result. The live preview shows a rectangle with your border-radius applied, updating in real time as you adjust.
- Choose your unit. Most generators support pixels (px), percentages (%), and sometimes em or rem units. Select the unit system that matches your project.
- Copy the CSS. Click the copy button or select the CSS property from the output field. Paste it into your stylesheet.
The output is a standard CSS border-radius property you can use directly.
Common use cases and reference values
Here are typical border-radius values for common UI patterns:
| Element | Typical border-radius |
|---|---|
| Card (subtle) | 4px - 8px |
| Card (rounded) | 12px - 16px |
| Button (standard) | 4px - 6px |
| Button (pill) | 9999px or 50% |
| Avatar (circle) | 50% |
| Tag or badge | 100px |
| Modal dialog | 8px - 12px |
| Input field | 4px - 6px |
These are starting points. Your design system may use a different base unit. Many design systems use a base-4 scale (4px, 8px, 12px, 16px) for consistency.
Mini-story: Mei, a UX designer at an e-commerce company in Singapore, needed to update the border-radius values across her design system in November 2025. The product team wanted to shift from sharp, squared corners (4px) to a softer aesthetic (12px on cards, 8px on inputs, fully rounded tags). She used ToolHQ's Border Radius Generator to preview each element type and confirm the visual effect before specifying the updated values in the design spec. She also used it to explain the intent to developers: she sent each generated CSS string as a reference alongside the design mockup.
For your CSS workflow, combine this with the CSS Gradient Generator to add gradient backgrounds to your rounded elements, and the CSS Minifier to optimize your final stylesheet. All developer tools are in ToolHQ's developer category.
Frequently asked questions
What is the CSS for a circle?
Use border-radius: 50% on an element with equal width and height. This creates a perfect circle regardless of the element's size.
Can I set different horizontal and vertical radii for elliptical corners?
Yes. The CSS syntax for this is border-radius: Xpx / Ypx, where X is the horizontal radius and Y is the vertical radius. Some generators support this directly; others let you set the two values separately.
What's the difference between px and % for border-radius?
Pixel values are absolute: border-radius: 12px is always 12px regardless of element size. Percentage values are relative to the element's dimensions, so border-radius: 50% creates a circular result proportional to the element's size.
Does border-radius affect the element's clickable area?
No. CSS border-radius is purely visual. The element's actual bounding box and clickable area remain rectangular, even if the corners are visually rounded. For click detection on circular elements, JavaScript is required.
Can I use border-radius with images?
Yes. Applying border-radius to an img element rounds its visible corners. Adding overflow: hidden to the image's parent container ensures content doesn't overflow the rounded corners.
Conclusion: the short version
Rounded corners are everywhere in modern UI design, and getting the values right by hand for four independent corners is tedious. ToolHQ's Border Radius Generator gives you visual control over every corner with instant CSS output and live preview. Adjust sliders, see the result, copy the code. Browser-based, free, no account required.
Stop guessing pixel values. Generate them visually and move on.
Create your border-radius CSS now, free, no account needed
For related tools, use the CSS Gradient Generator for background styling, the CSS Minifier for production-ready output, and the JS Minifier to optimize your JavaScript alongside. See all developer tools in ToolHQ's developer section.