Border Radius Generator
Create CSS border radius values visually with corner controls
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.