Herramientas · CSS · Redondear esquinas en CSS
Redondear esquinas en CSS
Da forma a cada esquina de una caja por separado, o combínalas en una forma orgánica, y copia el CSS border-radius.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Ajusta el radio vinculado, o desactiva "Vincular todas las esquinas" para ajustar cada una por separado.
Cambia al modo Blob, ajusta la suavidad, y haz clic en Aleatorio para una forma orgánica.
Copia el CSS border-radius terminado.
Preguntas frecuentes
Sí. Desactiva "Vincular todas las esquinas" y ajusta las cuatro de forma independiente.
Genera la técnica abreviada de border-radius que se usa para formas orgánicas e irregulares: un radio horizontal y vertical distinto por esquina. Ajusta cuánto se nota el efecto con Suavidad, y luego haz clic en Aleatorio para una forma nueva.
Sí. Ajusta el radio al 50% para un círculo en una caja cuadrada, o una forma de píldora en un rectángulo ancho.
No. Todo funciona en tu navegador.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)
The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.
Leer la guíaHow to Round Corners and Build CSS Blob Shapes
Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.
Leer la guíaCircle, Pill or Blob: Picking the Right border-radius
An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.
Leer la guía
Comentarios