Border Radius Generator
Create CSS border radius values visually with corner controls
Preview
Presets
Corners
CSS Code
All processing happens in your browser.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Adjust corner radius — Use the sliders to set the radius for each corner. Link corners together for uniform rounding.
- 2 Try shape presets — Click preset buttons for common shapes like Circle (50%), Pill (9999px), or various rounded levels.
- 3 Enable elliptical mode — Toggle elliptical mode to set different horizontal and vertical radius values for oval-shaped corners.
- 4 Copy the CSS — Copy the generated CSS code. Optionally include vendor prefixes for older browser support.
Frequently Asked Questions
What is border-radius in CSS?
Border-radius is a CSS property that rounds the corners of an element. A value like 'border-radius: 10px' rounds all corners equally. Higher values create more rounded corners, and 50% on a square creates a circle.
Can I round corners differently?
Yes! Use four values for individual corners: 'border-radius: TL TR BR BL' (e.g., '10px 20px 30px 40px'). This generator lets you control each corner independently with visual sliders.
What are elliptical corners?
Elliptical corners have different horizontal and vertical radius values, creating oval-shaped curves instead of circular ones. Use the '/' syntax: 'border-radius: 10px 20px / 5px 10px' for horizontal/vertical values.
Do I need vendor prefixes?
For modern browsers (2015+), no. Border-radius has excellent support. Only include -webkit- and -moz- prefixes if you need to support very old browsers like Safari < 5 or Firefox < 4.