Cómo redondear los bordes de una imagen en HTML
Si eres un principiante en fotografía y quieres aprender a redondear los bordes de una imagen en HTML, estás en el lugar adecuado. A continuación, te explicaremos paso a paso cómo lograrlo de forma sencilla.
Utilizando CSS
Para redondear los bordes de una imagen mediante HTML, se utiliza CSS. Lo primero que debes hacer es asignar una clase a tu imagen. Puedes hacerlo con el atributo class dentro de la etiqueta img, por ejemplo:
<img class="imagen-redondeada" src="imagen.jpg" alt="Mi imagen">
Ahora, agrega el siguiente código CSS en la sección <style> de tu documento HTML, o en un archivo CSS externo:
.imagen-redondeada {
border-radius: 50%;
}
El valor border-radius: 50% creará bordes redondeados al 50% de la imagen. Puedes ajustar este valor para obtener diferentes niveles de redondez.
Ejemplo práctico
Ahora, veamos cómo se ve todo esto en acción. Supongamos que tenemos una imagen con la clase «imagen-redondeada» como mencionamos antes:
<img class="imagen-redondeada" src="imagen.jpg" alt="Mi imagen">
Al aplicar el CSS correspondiente, tu imagen se verá con los bordes redondeados. ¡Así de sencillo es!
Recuerda que puedes experimentar con diferentes valores de redondez para obtener el efecto deseado. ¡Diviértete aprendiendo y mejorando tus habilidades fotográficas!
¿Has probado a redondear los bordes de tus imágenes en HTML? ¡Cuéntanos tu experiencia en los comentarios o comparte tus proyectos! Nos encantaría ver lo que has logrado.