Create Beautiful Rounded Profile Pictures using Simple CSS
You are here:Home » Web Design » Create Beautiful Rounded Profile Pictures using Simple CSS

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 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:

 

rounded-image-with-no-border

 

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 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)

 

rounded-picture-border-style-width-added

 

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 top edge. Take a look at this example (opens in new tab) on W3Schools for 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 look 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:

 

rounded-picture-border-color

 

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



8 comments:

  1. Awesome stuff. Pretty useful codes. Keep posting stuffs like this :)

    ReplyDelete
  2. Thank you so much! Will bring more good stuff like this for sure :) Just stay tuned!

    ReplyDelete
  3. WOw Bro this is really a nice one.
    I know this is not easy for bloggers on blogspot. It comes easy on wp but blogspot bloggers always have probs in this.
    Thanks for elaborating.
    Have a nice day bro

    ReplyDelete
  4. Hello Sasidhar,

    Pretty awesome information you shared! So easy for a person with no coding know-how like myself. :)

    Oh and one question hits me hard in mind; will the same code work for WordPress?

    Thanks! And I am happy to share it! :)

    ~ Adeel

    ReplyDelete
  5. Blogger supports all the HTML, CSS, JS and its all extension technologies as well as WP. The advantage of WP over blogger is it is a CMS that gives more control over the content. That's it, it has never been so difficult coding for Blogger ever.


    Glad you liked it bro! Thank you so much for sharing your thoughts about it :)

    ReplyDelete
  6. Hi Adeel bro,


    Yes! it perfectly works on WordPress too! Blogging platforms supports HTML, CSS and JS technologies very well.


    It makes me happy to know that you found it easy even being a non-programmer. Thank you for sharing your questions about it. I'd be happy to answer further more queries if you had any.


    Thank you for shaing it to your social network as well.

    ReplyDelete

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!