CSS Border Radius Generator - Round Corners Visually Online
Create CSS border-radius with visual controls and live preview. Design rounded corners, pill shapes, and organic blobs — copy ready-to-use CSS.
Frequently Asked Questions
What is CSS border-radius?
CSS border-radius is a shorthand property that rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii (horizontal and vertical) per corner to create elliptical corners. It is one of the most commonly used CSS properties for creating rounded buttons, cards, avatars, pill-shaped elements, and decorative shapes.
How do I use this border-radius generator?
Choose between Simple mode (4-corner control) or Advanced mode (8-value with horizontal/vertical per corner). Adjust each corner's radius using sliders, numeric inputs, or by dragging the handles on the preview element. Use the Link toggle to set all corners to the same value simultaneously. Optionally, start from a preset shape and customize from there. Copy the generated CSS code with one click.
Is this tool secure and private?
Yes. This tool runs 100% in your browser using client-side JavaScript. No data of any kind is sent to any server. All CSS generation and preview rendering happens locally on your device, ensuring total privacy.
What is the difference between Simple and Advanced mode?
Simple mode uses one value per corner (circular rounding), producing CSS like border-radius: 10px 20px 30px 40px. Advanced mode uses the slash notation with two values per corner (horizontal and vertical radii), producing CSS like border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%. The slash notation creates elliptical corners where the horizontal and vertical curvatures differ, enabling organic blob-like shapes.
When should I use percentage vs pixel units?
Use percentage (%) when you want the border-radius to scale proportionally with the element's size -- for example, border-radius: 50% always makes a perfect circle regardless of element dimensions. Use pixels (px) when you want a fixed, consistent curvature that does not change with the element's size -- for example, border-radius: 8px for consistent rounded card corners across different card sizes.
How does the CSS shorthand optimization work?
The tool automatically produces the most compact valid CSS. If all 4 corners are the same (e.g., 10px), it outputs border-radius: 10px instead of repeating the value four times. If opposite corners match (TL=BR and TR=BL), it uses the 2-value shorthand. This matches how the CSS specification defines border-radius shorthand resolution and saves you from writing redundant code.
Code Examples
// CSS Border Radius Generator
function optimizeShorthand(values, unit) {
const [a, b, c, d] = values;
if (a === b && b === c && c === d) return `${a}${unit}`;
if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}
function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}
function generateElliptical(h, v, unit = '%') {
const hPart = optimizeShorthand(h, unit);
const vPart = optimizeShorthand(v, unit);
if (hPart === vPart) return `border-radius: ${hPart};`;
return `border-radius: ${hPart} / ${vPart};`;
}
console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;
console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;
console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;