¿Algo va mal con esta herramienta?
Sobre «CSS Border Radius Generator Online»
Esta herramienta te ayuda a crear valores de border-radius con vista previa visual. Usa controles por esquina para formas asimétricas, arrastra porcentajes para formas tipo blob orgánicas, o elige preajustes comunes (redondeado, pill, círculo).
border-radius da a los elementos sus bordes redondeados. Más allá del redondeo uniforme simple, los diseños modernos usan radios elípticos, especificaciones por esquina e incluso porcentajes asimétricos para crear formas orgánicas usadas en ilustración y elementos decorativos.
La salida funciona en cualquier contexto CSS — botones, tarjetas, imágenes, contenedores. Puedes copiar como abreviada (border-radius: ...) o explícita por cada esquina según prefieras.
Cómo usar esta herramienta
Cómo armar un border-radius para 4 esquinas
Cada esquina
«Top-left», «Top-right», «Bottom-right», «Bottom-left» aceptan píxeles del radio de la esquina correspondiente. El orden sigue la shorthand CSS: desde arriba-izquierda en sentido horario.
Ejecutar
Resultado: un único campo `css` — `<tl>px <tr>px <br>px <bl>px`. Pega como valor de `border-radius:`. Si los cuatro son iguales podrías ponerlo como un único número, pero la herramienta siempre emite la forma de 4 valores.
Trucos asimétricos
Esquinas distintas crean formas comunes de UI: chat bubble usa una esquina en 0 (`12 12 12 0`), pestañas con dos esquinas inferiores en 0, botones pill con valor enorme izquierda+derecha y 0 arriba+abajo — o más simple, un valor enorme igual tipo `9999`.
Radios elípticos
CSS soporta radios elípticos por esquina con `tl-x/tl-y` (`12px/24px`) para elipses asimétricas. Esta herramienta sólo emite esquinas circulares (un solo valor) — edita a mano si necesitas elípticas.