Usa el Generador de Border Radius CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Que hace el border radius
El border radius redondea las esquinas de una caja. Eso suena trivial, pero el radio de esquina es una de las senales mas fuertes de la personalidad de un diseno. Las esquinas afiladas se sienten precisas, tecnicas y formales. Las esquinas un poco redondeadas se sienten amables y modernas. Las esquinas totalmente redondeadas se sienten juguetonas e informales, por eso los botones en forma de pildora dominan las apps de consumo. Cambiar un radio unos pocos pixeles cambia como se siente toda una interfaz, aunque los usuarios rara vez noten el numero en si.
La propiedad acepta hasta cuatro valores, uno por esquina, en el orden superior izquierda, superior derecha, inferior derecha, inferior izquierda: en sentido horario desde la esquina superior izquierda. Un valor redondea las cuatro esquinas por igual. Dos valores emparejan esquinas opuestas. Cuatro valores dan control total. Tambien existe una forma eliptica, con una barra que separa los radios horizontales de los verticales, que produce esquinas con forma de cuarto de elipse en vez de cuarto de circulo.
Como usar la herramienta
Empieza con todas las esquinas iguales, que cubre la mayoria de disenos, y arrastra el control hasta que la vista previa se vea bien. Desmarca esa opcion para poner cada esquina por separado, que es como se construyen formas como una tarjeta redondeada solo arriba, o una burbuja de chat con una esquina cuadrada. Marca el modo eliptico cuando quieras una esquina mas ancha que alta, o mas alta que ancha, y pon el radio vertical por separado.
La vista previa se actualiza en vivo, y el resultado CSS la sigue. Copialo en tu hoja de estilos como una sola linea border-radius. El maximo de la herramienta, 150 pixeles, cubre todo hasta cajas totalmente en forma de pildora en tamanos tipicos.
Elegir un radio
El radio debe relacionarse con el tamano del elemento. Un radio de 4 pixeles en un boton pequeno se lee como un poco suavizado; los mismos 4 pixeles en una tarjeta grande son casi invisibles. Un sistema comun es escalar el radio con el tamano: 4 a 6 pixeles para botones y entradas, 8 a 12 para tarjetas, 16 a 24 para paneles grandes y ventanas modales. Cuando dudes, iguala el radio al relleno del elemento o a los elementos cercanos, porque los radios coherentes se ven intencionales y los distintos se ven accidentales.
El redondeo total merece una regla propia: una forma de pildora ocurre cuando el radio es al menos la mitad de la altura del elemento. Para un boton de 40 pixeles de alto, 20 pixeles dan una pildora perfecta. Poner un radio enorme como 999 pixeles es un atajo popular que garantiza una pildora a cualquier altura, y es inofensivo, aunque un valor preciso documenta mejor tu intencion.
Esquinas individuales
Redondear solo algunas esquinas crea formas con usos claros. Una tarjeta que queda en la parte superior de una pagina a menudo redondea solo sus esquinas superiores, porque su borde inferior se une al contenido de abajo. Una pestana redondea solo sus esquinas superiores por la misma razon. Las burbujas de chat dejan famosa una esquina cuadrada para sugerir una cola que apunta al hablante. Los pies de foto que se superponen a una imagen redondean solo las esquinas que miran lejos de la imagen.
Cuando pones esquinas individuales, manten el orden correcto: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Mezclar el orden es el error mas comun de border-radius, y se muestra como una forma que parece reflejada respecto a lo que querias. La herramienta etiqueta cada control para que pongas la esquina que quieres decir.
Esquinas elipticas
Las esquinas elipticas usan dos radios por esquina: un radio horizontal y uno vertical, separados por una barra. El primer grupo de cuatro valores es horizontal, el segundo grupo es vertical. Una esquina eliptica ancha y baja, como 40 pixeles en horizontal y 10 en vertical, da una pendiente suave en el borde superior y una curva rapida por el lateral. Esta forma aparece en disenos organicos, formas de gota y cabeceras decorativas donde una esquina circular se veria demasiado simple.
Radio y otras propiedades
El radio de borde interactua con otras propiedades de formas que sorprenden a los principiantes. Un borde sigue la esquina redondeada, por eso las tarjetas con borde se ven bien con radio. Un contorno, en cambio, se mantiene rectangular en navegadores antiguos, asi que un boton enfocado con un radio grande puede mostrar un contorno cuadrado alrededor de un boton redondo; los navegadores modernos ya siguen el radio para contornos tambien, pero compruebalo si das soporte a versiones antiguas.
Errores que debes evitar
El error principal es la incoherencia: cinco radios distintos en una pagina sin un sistema detras. Elige dos o tres valores, asignales a tamanos de elemento, y reutilizalos. Otro error es redondear todo, incluidas tablas y paneles densos de datos, donde las esquinas afiladas ayudan a escanear y las redondeadas desperdician espacio. Por ultimo, recuerda que el radio es un tratamiento visual, no una herramienta de diseno: nunca cambia el tamano ni la posicion de un elemento, solo como se dibujan sus esquinas.