In this tutorial, we will explore four different ways to add rounded edges to images using CSS, pure JavaScript, jQuery and Bootstrap.

Method 1: CSS.

The easiest method to create rounded borders on images is by using the CSS border-radius property. Here’s how to do it:

<!DOCTYPE html>
<html>
<head>
<style>
  img {
    border-radius: 50%; /* Change this value according with the degree of roundest needed */
  }
</style>
</head>
<body>

<img src="example.jpg" alt="Example image" width="200" height="200">

</body>
</html>

Method 2: Pure JavaScript.

You can also create rounded edges in images using pure JavaScript. Here is an example of how to do it:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="example.jpg" alt="Example image" width="200" height="200">

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

</body>
</html>

Basically we add the border-radius property but via JavaScript, which can be useful in dynamic content.

Method 3: jQuery.

If you prefer to use jQuery, you can achieve the same effect with the .css() function. Here’s how:

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

<img id="myImage" src="example.jpg" alt="Example image" width="200" height="200">

</body>
</html>

Basically the same principle as the JavaScript method but with the simple jQuery notation.

Method 4: Bootstrap.

Bootstrap provides built-in classes to create rounded edges on images easily. The rounded-circle class creates a circular border, while rounded creates a slightly rounded border. Here is an example:

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

<img src="example.jpg" alt="Example image" width="200" height="200" class="rounded-circle">

<img src="example.jpg" alt="Example image" width="200" height="200" class="rounded">

</body>
</html>

In this case Bootstrap takes care of the necessary CSS and we only need to use the class corresponding to our purpose.