How to create a circular image using CSS

Arif Billah Babu

          

  CSS



Image not found!!

To create a circular image using CSS, you can use the border-radius property. Here's a simple example:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .circular-image {
      width: 100px; /* Adjust the size of your image */
      height: 100px; /* Adjust the size of your image */
      border-radius: 50%; /* Make it a perfect circle by setting the border-radius to 50% */
      overflow: hidden; /* Hide overflow content outside the circle */
    }
  </style>
</head>
<body>

  <div class="circular-image">
    <img src="your-image.jpg" alt="Your Image">
  </div>

</body>
</html>

In this example:

  1. The border-radius: 50% is used to make the container a perfect circle.
  2. The overflow: hidden property ensures that any content outside the circle is hidden.

Adjust the width and height values as per your requirements, and don't forget to replace "your-image.jpg" with the actual path to your image.

Category List