Create Beautiful Rounded Profile Pictures using Simple CSS

Profile pictures are personal identifiers of an average internet user. We may not able to tweak the profile pictures on social media networking sites but, we can do the same on our blogs and personal webpages. Let’s see how to make some beautiful profile pictures using known CSS.

By using a simple CSS property called border-radius, we can bend the pictures’ square/rectangular shaped edges into a circular shape. Increasing border-radius to 50% brings the required shape to the picture.

Setting the border-radius alone will leave the picture with no border or bezel around it. It would look like something like this:

The code to display the above image is as follows:

CSS:

<style>

        .rpic img{
            border-radius: 50%;
        } </style>

HTML:

<div class="rpic">
       <img src="http://pkfast.com/image.php?u=6018&dateline=1422394928"/>
</div>

Let’s make it beautiful with border-style property.

The width of the bezel (border-style) can be modified by using the regular border-width property in CSS. So, the resultant CSS becomes this:

<style>
        .rpic img{
            border-radius: 50%;          
            border-style: solid;
            border-width: 5px;
        }
</style>

While the HTML remains the same.

Result: (Watch the following picture with border-style and border-width properties added to the code)

border-style can be ‘dotted’, ‘dashed’, ‘double’, ‘groove’, ‘ridge’, ‘inset’, ‘outset’ other than ‘solid’. You can even use their combo like as ‘dotted solid double dashed’ and it will be applied clockwise starting from the top edge. Take a look at this example (opens in new tab) on W3Schools for a better idea.

The border style color of the picture can also be modified using the border-color property.

When added, the resultant code will look at this:

<style>
        .rpic img{
            border-radius: 50%;
            border-width: 5px;
            border-style: solid;
            border-color: #09aacc;
        }
</style>

Value for border-color property can be the name of the color, hexadecimal code or rgb(0,0,0) values.

Result:

Hope that was made simple. Don’t forget to share with me your beautiful rounded profile picture in the comments section below.