Cómo usar: Border Radius Generator
- Drag the slider to round all four corners — or choose Each corner to set top-left, top-right, bottom-right and bottom-left separately.
- Switch the unit:
pxfor fixed rounding,%to scale with the element (50% on a square makes a circle). - Choose Elliptical or Random blob for organic shapes with 8 values.
- Copy the CSS — it is shortened to the fewest values that give the same shape.
How border-radius values work
| CSS | Corners |
|---|---|
border-radius: 12px | all four |
border-radius: 12px 4px | top-left & bottom-right, top-right & bottom-left |
border-radius: 12px 8px 4px 0 | top-left, top-right, bottom-right, bottom-left (clockwise) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptical: horizontal radii / vertical radii — blob shapes |
Pill buttons: use a large value like 9999px — the browser caps it at half the height, so the ends stay round at any size. Circles: 50% on a square element. Percentages are relative to the box’s width (horizontal radii) and height (vertical radii).
Related: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
También se busca como: css border radius, rounded corners css, css blob generator, fancy border radius, css rounded corners generator, border radius online.
Herramientas que combinan con: Border Radius Generator
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
- Cubic Bezier Generator — Shape an easing curve by dragging two handles and race it against standard easings.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Preguntas frecuentes
How do I make rounded corners in CSS?
Use border-radius, e.g. border-radius: 12px for all corners, or four values for top-left, top-right, bottom-right and bottom-left.
How do I make a pill-shaped button?
Set border-radius to a large value such as 9999px. The browser limits it to half the height, so the ends are always perfectly round.
How do I make a circle?
Give the element equal width and height and border-radius: 50%.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and after it vertical radii, so each corner becomes an ellipse — that is how blob shapes are made.
¿Puedo instalar Border Radius Generator como aplicación web y utilizarla sin conexión?
Sí. Border Radius Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.