▣ CSS Border Radius Generator

Build CSS border-radius shapes visually with independent corner controls. Preview any shape live and copy the CSS. Free online border-radius generator for web designers.

Top Left: 20px

Top Right: 20px

Bottom Left: 20px

Bottom Right: 20px

Lock all corners

Generated CSS

How to Use

Drag the sliders

Use the four corner sliders to set individual border-radius values. Toggle "All" to change all corners at once.

See the live preview

The box updates instantly to show the exact shape your radius values create.

Copy the CSS

Click Copy CSS to copy the border-radius property to your clipboard.

Frequently Asked Questions

What is CSS border-radius? +

border-radius rounds the corners of an element. A single value rounds all corners equally. You can specify each corner individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

How do I make a perfect circle with CSS? +

Set border-radius: 50% on a square element (equal width and height). For example: width:100px; height:100px; border-radius:50%;

What is the shorthand order for border-radius? +

The shorthand follows clock order: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px applies 10px to top-left, 20px to top-right, 30px to bottom-right, 40px to bottom-left.

What are elliptical border radius values? +

You can create elliptical corners using the / separator: border-radius: 50px 50px 0 0 / 80px 80px 0 0 creates a semi-ellipse on top. This creates organic, pill, or teardrop shapes in CSS.

Can I use percentages for border-radius? +

Yes — percentage values are relative to the element width (horizontal) and height (vertical). border-radius: 50% makes a perfect circle on square elements and an ellipse on rectangular ones.

Guía: Generador de Border-Radius CSS

¿Qué es?

border-radius redondea las esquinas de elementos. Con valores asimétricos permite formas orgánicas como gotas de agua. La sintaxis completa acepta hasta 8 valores para radios horizontal y vertical por esquina.

Cómo usar

Arrastra los controles de cada esquina.
O ingresa valores manualmente.
Activa radios asimétricos para formas orgánicas.
Copia el CSS.

Consejos

border-radius: 50% convierte cualquier cuadrado en círculo.
Para pills, usa un valor mayor al alto: border-radius: 100px.
Los valores en % son relativos al tamaño — más flexibles para diseño responsivo.