Esquinas redondeadas en imágenes rectangulares usando solo CSS

En este artículo se explorará cómo crear esquinas redondeadas en imágenes rectangulares utilizando únicamente CSS. A menudo, se necesitan imágenes con bordes redondeados para una mejor presentación en sitios web y aplicaciones móviles. Al hacerlo con CSS, podemos evitar tener que editar manualmente la imagen y acelerar el proceso de diseño.

¿Cómo se puede hacer esquinas redondeadas en imágenes con CSS?

Para hacer esquinas redondeadas en imágenes rectangulares con CSS, podemos utilizar la propiedad 'border-radius'. Esta propiedad define el radio de los bordes de un elemento y se puede aplicar a cualquier elemento HTML, incluyendo imágenes.

El siguiente código CSS aplicará esquinas redondeadas a una imagen rectangular:


img {
border-radius: 20px;
}


El valor del radio en píxeles se puede ajustar para crear diferentes grados de esquinas redondeadas. También se pueden crear esquinas redondeadas únicas, definiendo valores específicos para cada esquina de la imagen:


img {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 15px;
}


Cómo funcionan las propiedades 'border-radius'

Las propiedades 'border-radius' funcionan creando arcos en los bordes de un elemento. Cada arco se define por su radio y posición. Por ejemplo, 'border-top-left-radius' se refiere al arco en la esquina superior izquierda del elemento.

Además, la propiedad 'border-radius' también acepta múltiples valores para definir esquinas redondeadas diferentes. El primer valor define el radio superior izquierdo, el segundo valor define el radio superior derecho, el tercer valor define el radio inferior derecho y el cuarto valor define el radio inferior izquierdo.


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


Este código aplicará diferentes radios a cada esquina de la imagen.

Ejemplos de código

Para ver cómo funcionan estas propiedades en acción, aquí hay algunos ejemplos de código:


img {
border-radius: 50%;
}

img {
border-radius: 20px 0 20px 0;
}


Conclusión

Crear esquinas redondeadas en imágenes rectangulares utilizando CSS es una técnica útil para mejorar la presentación en sitios web y aplicaciones móviles. Utilizando la propiedad 'border-radius', podemos crear esquinas redondeadas únicas y diversos grados de curvatura con facilidad. ¡Agrega esta técnica a tu caja de herramientas de diseño web!

Preguntas frecuentes

¿Se pueden aplicar esquinas redondeadas a elementos que no son imágenes?

Sí, la propiedad 'border-radius' se puede aplicar a cualquier elemento HTML, incluyendo contenedores, botones y formularios.

¿La propiedad 'border-radius' es compatible con todos los navegadores?

La propiedad 'border-radius' es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Sin embargo, puede haber algunos problemas de compatibilidad con versiones antiguas de Internet Explorer.

¿Puedo utilizar diferentes radios para cada esquina?

Sí, puedes definir radios específicos para cada esquina de un elemento utilizando las propiedades 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius' y 'border-bottom-right-radius'.

¿Puedo utilizar valores porcentuales para definir radios?

Sí, la propiedad 'border-radius' también acepta valores porcentuales para definir radios en lugar de valores de píxeles. Esto permite una flexibilidad adicional en el diseño.

Ejemplos de código

A continuación se presentan algunos ejemplos adicionales de cómo utilizar 'border-radius' para crear diferentes efectos en esquinas redondeadas de imágenes y otros elementos HTML:


div {
border-radius: 50%;
background: linear-gradient(135deg, #48C6EF, #6F86D6);
height: 100px;
width: 100px;
}

input[type=text] {
border-radius: 10px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}


En el primer ejemplo, se define un círculo con un gradiente de color de fondo. En el segundo ejemplo, se aplica una esquina redondeada a un botón. En el tercer ejemplo, se utiliza la propiedad 'border-radius' para darle un aspecto más atractivo a un campo de entrada.

Cómo centrar y alinear un formulario en HTML

Cómo configurar el color de fondo transparente en CSS

Guía completa para utilizar guiones y rayas en HTML

Cómo agregar imágenes en HTML

Efecto de Contorno en Texto - CSS

Cómo cambiar contenido en CSS

CSS - Cómo eliminar completamente los bordes de una tabla HTML

Cómo agregar espacio en HTML

CSS: Cómo eliminar los bordes en tus elementos HTML