A profile picture is one of the most important aspects of an online identity, and having a rounded profile picture can add a more professional touch to your online presence. In this tutorial, we will show you how to create a rounded profile picture using pure CSS.
Step 1: HTML Markup First, let’s create the HTML markup for our profile picture. We will create a container for the profile picture and an image tag inside the container. We will also give the container a class of “profile-pic” so that we can style it with CSS later on.
<div class="profile-pic">
<img src="your-profile-picture.jpg" alt="Your Name">
</div>Step 2: CSS Styling Now that we have our HTML markup, let’s style it to create a rounded profile picture. We will first give the container a fixed width and height so that it can contain the profile picture. We will also give it a border-radius property of 50% to create a circle shape.
.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
}Next, we will style the image inside the container. We will give it a width and height of 100% to fill the container, and we will also give it a border-radius property of 50% to match the container’s shape.
.profile-pic img {
width: 100%;
height: 100%;
border-radius: 50%;
}Step 3: Optional Styling To further customize your rounded profile picture, you can add additional CSS properties to the container and the image. For example, you can add a border property to the container to create a border around the profile picture, or you can add a box-shadow property to give it a shadow effect.
.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid #333;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.profile-pic img {
width: 100%;
height: 100%;
border-radius: 50%;
}Creating a rounded profile picture using pure CSS is a simple and effective way to add a professional touch to your online presence. By following the steps outlined in this tutorial, you can easily create a rounded profile picture that can be customized to fit your needs.
