How to make a picture a circle

Turning a picture into a circle can add a stylish touch to your website design. With our guide, you'll find it easy to make any image circular using different techniques, including Bootstrap for quick styling.

Using Bootstrap

Bootstrap provides utility classes to easily create circular images. This method is efficient for rapid prototyping and consistent styling.

In this example, we use Bootstrap's rounded-circle class to make the image circular.

Circular Image 
        
            
        <img src="path/to/your/image.jpg" class="rounded-circle" style="width: 200px;" alt="Circular Image" />

Using CSS with Border-Radius

You can make a picture a circle by applying CSS styles, specifically the border-radius property. This method is clean and reusable.

In this example, we set the border-radius property to 50% to create a circular image.

Circular Image 
        
            
        <img src="path/to/your/image.jpg" class="circle-image" alt="Circular Image">
        
        
    
        
            
        .circle-image {
          width: 200px; /* Set the desired width */
          height: 200px; /* Set the desired height */
          border-radius: 50%;
          object-fit: cover; /* Ensure the image covers the entire element */
        }