CSS Border Radius Generator - Visual Corner Rounder
32 uses20px
20px
20px
20px
Tips
Circle
Set 50% for a perfect circle
Link
Link corners to adjust all at once
Organic
Different values per corner for blob shapes
Units
px for fixed, % for responsive
Frequently Asked Questions
How to make a circle?
Set all corners to 50%.
Different values per corner?
Yes, unlink corners and adjust individually.
Shorthand syntax?
border-radius: TL TR BR BL (clockwise).
How do I implement the generated CSS border-radius code into my HTML or stylesheet?
After customizing your border-radius visually, simply copy the complete CSS code provided by the generator. Paste it into your project's stylesheet (e.g., `style.css`) or directly within a `<style>` tag in your HTML `<head>`. Ensure you target the correct HTML element using its class or ID selector to apply the desired rounded corners effectively. This streamlines design and ensures correct syntax.
What happens if I set a border-radius value higher than half of the element's width or height using this generator?
When you set a `border-radius` value exceeding half of the shortest side of an element, the actual visual curve will cap at 50% of that side. The browser automatically limits the radius to prevent overlapping curves or malformed shapes. For example, on a 100x100px square, setting `border-radius: 200px;` will still result in a perfect circle, as if you had set `50px` or `50%`, effectively preventing an overly large radius.
What does the 'unlink' button do?
Clicking the 'unlink' button disconnects the individual corner controls. This means you can adjust one corner's radius without affecting the others. You'll see the four input fields become independent. It's handy for creating asymmetrical designs.
Can I use percentage values instead of pixels?
Yes, you can switch between pixels and percentages in the generator. Percentages are relative to the element's dimensions, not the radius itself. A 50% value on a 200px-wide box creates a 100px radius at the corners. This matters most for responsive layouts where element size changes. Try using percentages when your design needs to scale fluidly across screens.
How to Use
- Toggle link mode
- Adjust corner sliders
- Preview shape
- Copy CSS