Configura border-radius CSS para cada esquina con vista previa y preajustes
Un generador de border-radius te deja redondear las esquinas de un elemento de forma visual — ajustando cada esquina con controles deslizantes y viendo una vista previa en vivo — y luego copiar el valor exacto de border-radius en CSS. Las esquinas redondeadas son uno de los toques más comunes del diseño de interfaces moderno, suavizando tarjetas, botones, inputs e imágenes, pero el CSS que las controla puede fijar cada una de las cuatro esquinas de forma independiente e incluso hacerlas elípticas, lo que es difícil de imaginar solo con los números. Arrastrar un control y ver la forma cambiar es mucho más rápido que editar valores a ciegas.
El detalle que la mayoría no sabe es cuánto rango tiene border-radius: más allá de un redondeo uniforme, puedes dar a cada esquina su propio radio, y usar dos valores por esquina para crear curvas elípticas en vez de circulares — que es como se hacen las formas orgánicas y asimétricas tipo "blob". Un radio igual lo bastante grande en un cuadrado lo convierte en un círculo perfecto. Esta herramienta genera CSS basado en estándares en tu navegador con presets y control por esquina, listo para pegar en cualquier elemento.
Sí. border-radius acepta hasta cuatro valores, uno por esquina (superior izquierda, superior derecha, inferior derecha, inferior izquierda), así que puedes redondear algunas y dejar otras cuadradas, o dar a cada una una cantidad distinta. El generador expone control por esquina justo para esto.
Fija el border-radius a 50% (o a la mitad del ancho del elemento en píxeles) en un elemento cuadrado. Como el radio llega al centro de cada lado, las esquinas se fusionan en un círculo continuo. Una forma de píldora viene de un radio grande en un elemento más ancho que alto.
Un solo valor crea una esquina circular (de cuarto de círculo); dos valores dan a la esquina radios horizontal y vertical separados, produciendo una curva elíptica. Combinar valores elípticos distintos en cada esquina es como se hacen las formas suaves y orgánicas tipo "blob".
Sí. Un radio en píxeles es un tamaño fijo, mientras que un porcentaje es relativo a las dimensiones del elemento, así que escala cuando el elemento cambia de tamaño. Los porcentajes son como el 50% produce de forma fiable un círculo en cualquier cuadrado, sea cual sea su tamaño real.
Generador de sombra de caja CSS · Generador de Flexbox · Generador de CSS Grid · Generador de sombra de texto CSS · Generador de animaciones CSS · Generador de filtros CSS