17-Bordes Redondeados en CSS: Suaviza tu Diseño 🔵

---

Bordes Redondeados en CSS

• Introducción a border-radius
• Sintaxis básica de border-radius
• Redondear esquinas con un solo valor
• Redondear esquinas de forma individual
• Uso de valores en porcentaje
• Transformar un cuadrado en un círculo
• Bordes redondeados en imágenes y fondos
• Aplicación de bordes redondeados en botones y tarjetas
• Uso de transiciones con border-radius
• Combinación de border-radius con otras propiedades CSS
• Compatibilidad entre navegadores
• Crear formas personalizadas con border-radius
• Combinación de border-radius con clip-path

---

Introducción a border-radius

La propiedad border-radius en CSS se utiliza para redondear las esquinas de un elemento. Esta propiedad se aplica a cualquier elemento que tenga bordes, como un div, una imagen, o incluso una caja de texto.

Cuando se aplica border-radius, las esquinas del elemento toman un aspecto redondeado, y el valor del radio determina cuán redondeada será cada esquina.

El valor de border-radius puede ser un número de píxeles (por ejemplo, 10px) o un valor en porcentaje (por ejemplo, 50%).

Además de redondear todas las esquinas del elemento de manera uniforme, también es posible redondear cada esquina de forma individual, lo que ofrece un control más preciso sobre el diseño.

Veamos un ejemplo sencillo:

div {
    border-radius: 15px;
}

En este caso, el div tendrá esquinas redondeadas con un radio de 15 píxeles.

Ejemplos Visuales

En este ejemplo, vamos a mostrar cómo se aplica la propiedad border-radius a un div para redondear sus esquinas:

div {
    border-radius: 15px;
}

El código anterior crea un div con bordes redondeados de 15 píxeles. Aquí abajo puedes ver cómo se vería visualmente:

Este div tiene un fondo verde y bordes redondeados gracias a la propiedad border-radius.

---

Sintaxis básica de border-radius

La propiedad border-radius se puede utilizar de varias maneras. La sintaxis básica consiste en definir un solo valor para aplicar a todas las esquinas del elemento.

Este valor puede ser en píxeles o en porcentaje, y se aplica por igual a todas las esquinas. Veamos un ejemplo:

div {
    border-radius: 10px;
}

En este ejemplo, todas las esquinas del div se redondearán con un radio de 10 píxeles.

Ejemplos Visuales

En este ejemplo, vamos a mostrar cómo se aplica la propiedad border-radius con un solo valor para redondear todas las esquinas del elemento de forma uniforme. Este valor puede ser en píxeles o en porcentaje.

El div tiene un fondo verde y un radio de 10 píxeles aplicado a todas sus esquinas.

---

Redondear esquinas con un solo valor

Cuando aplicamos un solo valor a la propiedad border-radius, este valor se utiliza para redondear todas las esquinas del elemento. Esto es útil cuando queremos aplicar un redondeo uniforme en todas las esquinas.

Por ejemplo:

div {
    border-radius: 20px;
}

En este caso, todas las esquinas del div tendrán un radio de 20 píxeles.

Ejemplos Visuales

Este ejemplo muestra cómo utilizar un solo valor para redondear todas las esquinas de un elemento. Cuando aplicamos un valor a border-radius, ese valor se aplica de manera uniforme en todas las esquinas del elemento.

El div tiene un fondo naranja y un radio de 20 píxeles en todas sus esquinas.

---

Redondear esquinas de forma individual

Es posible redondear las esquinas de forma individual utilizando cuatro valores diferentes. Cada valor se aplica a una esquina en el siguiente orden:

• Primer valor: esquina superior izquierda
• Segundo valor: esquina superior derecha
• Tercer valor: esquina inferior derecha
• Cuarto valor: esquina inferior izquierda

Por ejemplo:

div {
    border-radius: 10px 20px 30px 40px;
}

En este caso, el div tendrá diferentes radios de esquina. La esquina superior izquierda tendrá un radio de 10 píxeles, la esquina superior derecha de 20 píxeles, la esquina inferior derecha de 30 píxeles y la esquina inferior izquierda de 40 píxeles.

Ejemplos Visuales

En este ejemplo, aplicamos diferentes radios para redondear cada esquina individualmente. Cada valor corresponde a una esquina específica, comenzando desde la esquina superior izquierda y siguiendo el sentido de las agujas del reloj.

El div tiene las siguientes esquinas redondeadas: 10px en la esquina superior izquierda, 20px en la esquina superior derecha, 30px en la esquina inferior derecha y 40px en la esquina inferior izquierda.

---

Uso de valores en porcentaje

La propiedad border-radius también acepta valores en porcentaje. Este valor depende del tamaño del elemento y produce un radio proporcional. Por ejemplo, si utilizamos un valor de 50%, se creará un círculo perfecto en un cuadrado.

Veamos un ejemplo:

div {
    border-radius: 50%;
}

En este caso, el div se convertirá en un círculo perfecto si su ancho y alto son iguales.

Ejemplos Visuales

Cuando se utiliza un valor en porcentaje para border-radius, el radio se calcula en proporción al tamaño del elemento. Un valor del 50% crea un círculo perfecto si el ancho y el alto del elemento son iguales.

El div tiene un radio de borde del 50%, lo que lo convierte en un círculo perfecto ya que su altura y anchura son iguales.

---

Transformar un cuadrado en un círculo

Para transformar un cuadrado en un círculo perfecto usando border-radius, necesitamos aplicar un valor del 50% y asegurarnos de que el elemento tenga igual altura y ancho.

Si el elemento tiene diferentes dimensiones (por ejemplo, un rectángulo), el resultado no será un círculo, sino una elipse.

Veamos el ejemplo para un div cuadrado:

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Este div tendrá un radio de 50%, por lo que se convertirá en un círculo perfecto debido a que su ancho y alto son iguales.

Ejemplos Visuales

Para transformar un cuadrado en un círculo perfecto usando border-radius, aplicamos un valor del 50% y nos aseguramos de que el ancho y la altura sean iguales.

Este div se convierte en un círculo perfecto debido a que su ancho y alto son de 100px, y el border-radius es del 50%.

---

Bordes redondeados en imágenes y fondos

También se pueden aplicar bordes redondeados a imágenes y fondos mediante la propiedad border-radius.

Al aplicar esta propiedad a una imagen, se redondearán sus esquinas, lo que le da un efecto visual atractivo.

Veamos un ejemplo de una imagen con bordes redondeados:

img {
    width: 200px;
    height: 200px;
    border-radius: 15px;
}

Este ejemplo redondea las esquinas de una imagen con un radio de 15 píxeles.

Lo mismo ocurre con los fondos de los elementos, como un div o una section:

div {
    background-image: url('imagen.jpg');
    border-radius: 10px;
}

En este caso, el fondo de un div también tendrá las esquinas redondeadas gracias a border-radius.

Ejemplos Visuales

Los bordes redondeados también se pueden aplicar a imágenes y fondos utilizando la propiedad border-radius.

En este caso, la imagen tiene bordes redondeados con un radio de 15px.

En este ejemplo, un div tiene un fondo color naranja y bordes redondeados con un radio de 10px.

---

Aplicación de bordes redondeados en botones y tarjetas

Los bordes redondeados son comúnmente utilizados en botones y tarjetas para lograr un diseño más suave y moderno.

Al aplicar border-radius a un botón, podemos crear bordes redondeados que se adapten al diseño visual de la página.

Veamos un ejemplo de un botón con bordes redondeados:

button {
    padding: 10px 20px;
    border-radius: 25px;
}

Este button tendrá un radio de 25 píxeles, dándole bordes redondeados.

Lo mismo se puede hacer con tarjetas, que son elementos visuales comunes en los diseños modernos de sitios web:

.card {
    border-radius: 15px;
    padding: 20px;
}

Este estilo aplica bordes redondeados a una tarjeta, suavizando sus esquinas.

Ejemplos Visuales

Los bordes redondeados también se pueden aplicar a botones y tarjetas para crear un diseño más moderno y suave.

Este botón tiene un radio de 25px, lo que le da un borde redondeado y un aspecto más suave.

Tarjeta con bordes redondeados

Esta tarjeta tiene bordes redondeados de 15px, haciendo que sus esquinas sean suaves y elegantes.

En este caso, la tarjeta tiene bordes redondeados, lo que mejora su apariencia.

---

Uso de transiciones con border-radius

Podemos aplicar transiciones suaves a los bordes redondeados con la propiedad transition en combinación con border-radius. Esto permite cambiar la forma de un elemento de manera animada al interactuar con él, como al pasar el ratón sobre un botón.

Por ejemplo, podemos hacer que un botón se redondee al pasar el ratón por encima:

button {
    padding: 10px 20px;
    border-radius: 15px;  /* Valor más grande para un cambio visible */
    transition: border-radius 0.3s ease;
}

button:hover {
    border-radius: 50px;  /* Valor más grande para un cambio notorio */
}

Este botón pasará de tener bordes de 15 píxeles a bordes de 50 píxeles cuando el usuario pase el ratón sobre él, con una transición suave de 0.3 segundos.

Ejemplos Visuales

Las transiciones con border-radius permiten cambiar suavemente la forma de un elemento, creando un efecto animado al interactuar con él.

Cuando pases el ratón sobre el botón, el radio de los bordes cambiará suavemente de 15px a 50px, gracias a la transición definida en el estilo.

---

Combinación de border-radius con otras propiedades CSS

La propiedad border-radius se puede combinar fácilmente con otras propiedades CSS para lograr diseños más complejos. Por ejemplo, podemos combinarla con box-shadow para agregar sombra alrededor de un elemento con bordes redondeados.

Ejemplo de combinación de border-radius y box-shadow:

div {
    width: 150px;
    height: 150px;
    background-color: #f1f1f1;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Este div tendrá bordes redondeados con sombra alrededor de él, creando un efecto visual atractivo.

Ejemplos Visuales

La propiedad border-radius se puede combinar con otras propiedades como box-shadow para crear efectos visuales atractivos, como añadir una sombra a los elementos con bordes redondeados.

Este div tiene bordes redondeados con un radio de 20px y una sombra suave alrededor de él gracias a la propiedad box-shadow.

---

Compatibilidad entre navegadores

La propiedad border-radius es ampliamente compatible con la mayoría de los navegadores modernos. Sin embargo, algunos navegadores antiguos, como Internet Explorer 8 y versiones anteriores, no lo soportan. En estos casos, puede ser necesario usar prefijos de proveedor o considerar alternativas como el uso de imágenes con bordes redondeados.

Es recomendable probar la compatibilidad del diseño con diferentes navegadores para asegurarse de que todos los usuarios tengan la mejor experiencia posible.

Compatibilidad entre navegadores

La propiedad border-radius es ampliamente compatible con la mayoría de los navegadores modernos. Sin embargo, algunos navegadores antiguos, como Internet Explorer 8 y versiones anteriores, no lo soportan.

En estos casos, puede ser necesario usar prefijos de proveedor o considerar alternativas como imágenes con bordes redondeados. Asegúrate de probar tu diseño en diferentes navegadores para garantizar una experiencia consistente para todos los usuarios.

Navegador	Soporte
Chrome	Sí
Firefox	Sí
Safari	Sí
Edge	Sí
Internet Explorer 11+	Sí
Internet Explorer 8-10	No
Opera	Sí
Mobile Safari	Sí
Android Browser	Sí

---

Crear formas personalizadas con border-radius

La propiedad border-radius no solo se utiliza para redondear las esquinas de elementos rectangulares, sino que también permite crear formas personalizadas. Combinando diferentes valores de radio para cada esquina, puedes crear círculos, óvalos y otras formas complejas.

Por ejemplo, para crear un círculo elíptico, puedes usar los siguientes valores:

div {
    width: 200px;
    height: 100px;
    border-radius: 50% / 25%;
}

Este código crea un div con bordes elípticos debido a los diferentes valores de border-radius para el ancho y la altura.

Ejemplos Visuales

Este es el resultado de combinar diferentes valores de border-radius para crear una forma elíptica:

Este div muestra un rectángulo con bordes elípticos, utilizando diferentes valores para el radio en el ancho y la altura.

---

Combinación de border-radius con clip-path

La propiedad border-radius puede combinarse con clip-path para crear formas aún más complejas. Mientras que border-radius redondea las esquinas, clip-path permite realizar recortes personalizados en los elementos.

Por ejemplo, podemos crear un círculo con bordes redondeados y luego aplicar un recorte triangular utilizando clip-path:

div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Este código crea un div circular con un recorte triangular aplicado en su interior. La combinación de ambas propiedades permite crear formas visualmente interesantes y complejas.

Ejemplos Visuales

Este es el resultado de combinar border-radius con clip-path, creando una forma personalizada:

El div muestra un círculo con bordes redondeados y un recorte triangular aplicado en su interior.

---

Todas las Propriedades de border

Propiedad	Descripción
border	Define todas las propiedades del borde en una sola declaración.
border-bottom	Define todas las propiedades del borde inferior en una sola declaración.
border-bottom-color	Define el color del borde inferior.
border-bottom-style	Define el estilo del borde inferior.
border-bottom-width	Define el grosor del borde inferior.
border-color	Define el color de los cuatro bordes.
border-left	Define todas las propiedades del borde izquierdo en una sola declaración.
border-left-color	Define el color del borde izquierdo.
border-left-style	Define el estilo del borde izquierdo.
border-left-width	Define el grosor del borde izquierdo.
border-radius	Define todas las propiedades del borde redondeado (radio de los cuatro bordes).
border-right	Define todas las propiedades del borde derecho en una sola declaración.
border-right-color	Define el color del borde derecho.
border-right-style	Define el estilo del borde derecho.
border-right-width	Define el grosor del borde derecho.
border-style	Define el estilo de los cuatro bordes.
border-top	Define todas las propiedades del borde superior en una sola declaración.
border-top-color	Define el color del borde superior.
border-top-style	Define el estilo del borde superior.
border-top-width	Define el grosor del borde superior.
border-width	Define el grosor de los cuatro bordes.

---

Ir al índice

---