En este tutorial, exploraremos cuatro formas diferentes de agregar bordes redondeados a las imágenes utilizando CSS, JavaScript puro, jQuery y Bootstrap.

Método 1: CSS.

El método más sencillo para crear bordes redondeados en imágenes es utilizando la propiedad border-radius de CSS. Aquí te mostramos cómo hacerlo:

<!DOCTYPE html>
<html>
<head>
<style>
  img {
    border-radius: 50%; /* Ajusta el valor según el grado de redondez deseado */
  }
</style>
</head>
<body>

<img src="example.jpg" alt="Imagen de ejemplo" width="200" height="200">

</body>
</html>

Método 2: JavaScript puro.

También puedes crear bordes redondeados en imágenes utilizando JavaScript puro. Aquí está un ejemplo de cómo lograrlo:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="example.jpg" alt="Imagen de ejemplo" width="200" height="200">

<script>
  document.getElementById("myImage").style.borderRadius = "50%";
</script>

</body>
</html>

Basicamente agregamos la propiedad border-radius pero vía Javascript, que puede ser útil en contenido dinámico.

Método 3: jQuery.

Si prefieres usar jQuery, puedes lograr el mismo efecto con la función .css(). Aquí te mostramos cómo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myImage").css("border-radius", "50%");
});
</script>
</head>
<body>

<img id="myImage" src="example.jpg" alt="Imagen de ejemplo" width="200" height="200">

</body>
</html>

Básicamente el mismo principio que el método de Javascript pero con la notación simple de jQuery.

Método 4: Bootstrap.

Bootstrap proporciona clases integradas para crear bordes redondeados en imágenes fácilmente. La clase rounded-circle crea un borde circular, mientras que rounded crea un borde ligeramente redondeado. Aquí tienes un ejemplo:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

<img src="example.jpg" alt="Imagen de ejemplo" width="200" height="200" class="rounded-circle">

<img src="example.jpg" alt="Imagen de ejemplo" width="200" height="200" class="rounded">

</body>
</html>

En este caso Bootstrap se encarga del CSS necesario y solo necesitamos usar la clase correspondiente a nuestro propósito.