CSS Border Radius: Guia Completa con Ejemplos

Fundamentos de border-radius

La propiedad CSS border-radius redondea las esquinas de un elemento. Es una de las propiedades mas utilizadas en diseno web moderno porque transforma rectangulos rigidos en formas mas suaves y atractivas visualmente.

Un solo valor aplica el mismo radio a las cuatro esquinas. Por ejemplo, border-radius con valor de 8px redondea ligeramente cada esquina, dando a botones y tarjetas un aspecto mas amigable que los angulos rectos por defecto.

Puedes especificar hasta cuatro valores para controlar cada esquina individualmente, siguiendo el orden: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda. Esto permite crear formas asimetricas interesantes con una sola propiedad.

Crear circulos y elipses

Para crear un circulo perfecto con CSS, el elemento debe tener ancho y alto iguales, y border-radius al 50 por ciento. El porcentaje se calcula respecto a las dimensiones del elemento, asi que 50 por ciento crea un arco que cubre exactamente la mitad de cada lado.

Si el ancho y el alto son diferentes, border-radius al 50 por ciento crea una elipse en lugar de un circulo. Este efecto es util para avatares ovalados o botones con forma de pastilla donde el ancho excede la altura.

Los valores en porcentaje y en pixeles se comportan de manera diferente al cambiar el tamano del elemento. Los porcentajes escalan proporcionalmente, mientras que los pixeles mantienen un radio fijo independientemente del tamano del contenedor.

Sintaxis avanzada con doble radio

La sintaxis completa de border-radius acepta valores separados por una barra. Los valores antes de la barra definen el radio horizontal y los de despues definen el radio vertical. Esto permite crear formas organicas complejas que no son posibles con un solo conjunto de valores.

Por ejemplo, border-radius con valores 50 por ciento 50 por ciento 50 por ciento 50 por ciento barra 60 por ciento 40 por ciento 60 por ciento 40 por ciento crea una forma de gota o de piedra lisa. Los generadores visuales son la mejor forma de experimentar con estas combinaciones porque el resultado no es intuitivo a partir de los numeros.

Tambien puedes usar las propiedades individuales como border-top-left-radius con dos valores para establecer radios horizontal y vertical diferentes en una sola esquina. Esto ofrece control total para disenos muy especificos.

Combinacion con otras propiedades CSS

Border-radius interactua con varias propiedades CSS. Combinado con overflow hidden, recorta el contenido del elemento a la forma redondeada. Esto es esencial para imagenes dentro de contenedores redondeados, ya que sin overflow hidden la imagen mantiene sus esquinas cuadradas.

Box-shadow respeta el border-radius, creando sombras que siguen la forma redondeada del elemento. Outline, en cambio, no lo respeta en todos los navegadores, lo que puede causar esquinas cuadradas visibles alrededor de elementos redondeados.

Las transiciones CSS animan border-radius suavemente, permitiendo efectos interactivos como esquinas que se redondean mas al pasar el cursor. La transicion entre un cuadrado y un circulo funciona especialmente bien como efecto hover en galerias de imagenes.

Usar nuestro generador de border-radius

Nuestro Generador de Border Radius ofrece una interfaz visual donde puedes arrastrar los controles de cada esquina y ver el resultado en tiempo real. Soporta tanto la sintaxis simple como la avanzada con doble radio.

Una vez que consigas la forma deseada, copia el codigo CSS generado y pegalo directamente en tu hoja de estilos. El generador tambien muestra la vista previa con diferentes colores de fondo para que puedas evaluar como se vera la forma en distintos contextos.