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](https://mdbcdn.b-cdn.net/img/new/avatars/2.webp)
<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](https://mdbcdn.b-cdn.net/img/new/avatars/4.webp)
<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 */
}