In this post, we will learn how to create an avatar image with CSS. An avatar is a picture that placed on right corner (mostly) on our social media profile that shows our identity to other people. So how we can create an avatar, we will learn in this post.


How To Create An Avatar Image With CSS ?


Create An Avatar Image

To create an avatar image, we use  img  HTML tag for insert image. We use same value for  height  and  width  to make image more visible. For rounded corners we use  border-radius: 50%  CSS property. 


Complete code is given below:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create An Avatar Image With CSS ?</title>
<style>

.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}

</style>
</head>
<body>

<img src="https://source.unsplash.com/400x400/?face" alt="Avatar Image" class="avatar">

</body>
</html> code-box



Summary

In this post we learned how to create an avatar image with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post