We see round-shaped images on many websites and mobile apps. Popular social media networks such as Facebook, Twitter, etc show profile images of the users in round shape. The round images can give your website a clean outlook.
Let’s check how to create a round image in HTML using CSS. If you prefer video then you can watch this tutorial on Youtube.
The images can be made round using the style property border-radius. The value of border-radius should be the half of height or width of the image. The proper round shape is attainable only when the height and width of the image are equal.
See the code given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.profile {
height: 250px;
width: 250px;
border-radius: 125px;
}
</style>
<title>Html Round Image Example</title>
</head>
<body>
<img class="profile" src="./images/bulb.jpg" alt="bulb" />
</body>
</html>
Here, the height and width of the image are 250 pixels. Thus, the border-radius is half of the 250px, ie 125 pixels. The output will be a neat round image.
That’s how you add a round image in HTML.
