Generador de esquinas redondeadas
Border Radius Generator
Da forma a cada esquina por separado, incluida la sintaxis de dos valores para formas orgánicas, y emite el CSS.
Redondea las esquinas de una caja con los ocho valores de radio disponibles y —porque «haz de esto un squircle» llega como la misma pregunta— también dibuja superelipses reales y formas con `clip-path`, que `border-radius` no puede.
Vista previa
CSS
Esquinas
Arriba a la izquierda
Arriba a la derecha
Abajo a la derecha
Abajo a la izquierda
Preajustes
clip-path
Una propiedad distinta con un trabajo distinto. border-radius redondea una caja; clip-path recorta una forma arbitraria y se lleva la sombra con ella.
Cómo se usa
Arrastra los deslizadores de las esquinas
Cuatro esquinas en px o en porcentaje. La vista previa y la declaración se actualizan juntas.
Desactiva «igual en los dos ejes» para las formas de burbuja
Eso da la forma de ocho valores con barra, donde cada esquina tiene un radio horizontal y otro vertical. Toda forma orgánica de burbuja sale de esa forma.
Cambia a clip-path cuando la forma no sea un rectángulo
Círculos, polígonos, un bocadillo, un chevrón, y el deslizador de superelipse, que es la curva real de squircle y no un rectángulo más redondeado.
Preguntas frecuentes
¿Por qué un radio de 9999px se ve igual que 50 %?
Porque cuando los radios de un lado se solaparían, la especificación escala *los cuatro* por el mismo factor hasta que caben. Así que cualquier valor absurdamente grande colapsa en la misma forma, y la página te muestra el factor que usó.
¿CSS puede dibujar un squircle real?
Con `border-radius`, no: esa esquina es estrictamente elíptica, así que un «deslizador de squircle» atornillado a un radio es solo un rectángulo más redondeado. La superelipse de aquí se dibuja como un polígono `clip-path`, que es la forma honesta de conseguir la curva hoy.
¿Por qué desapareció mi sombra con clip-path?
Porque `clip-path` recorta el elemento, y la sombra se dibuja fuera del elemento. También recorta los hijos que desbordan. `border-radius` no hace ninguna de las dos cosas, y por eso sigue siendo la herramienta correcta siempre que la forma sea un rectángulo redondeado.
¿Cómo redondeo solo las esquinas exteriores de un grupo?
Redondea el contenedor y dale `overflow: hidden`, o usa `:first-child`/`:last-child` en los elementos. Un radio por esquina en el propio grupo no llega a los hijos, que es lo que suele salir mal con un grupo de botones.
Puede recibir de
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Calculadora de tamaños fluidos
Fluid Size Calculator
Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.