How to make rounded image using CSS


Introduction: In this article I am going to explain how to make rounded image or we can say circular image using border-radius property of CSS. 

How to make rounded image using CSS


Description: Sometimes it is required to show image in round shape to make it more attractive or as per requirement to suit the page layout. We can simply make the image circular using the border-radius property to add rounded corners to an image. Setting this property to 50% will make the image round.

Implementation: Let’s see by an example.

<html>
<head>
    <style>
        .roundimage {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_0ieUzgku7fJVmj2ITTE5wK7LTxndqVSEEyYujXce0zYncwxAgQw0sfn-VzSb1FA2fYNKtRG2K4RwXlupLlpIfEVLOk1UOymBo9F7JPYk2Lr0eiaZ683ygp9Uoklgx5Wf_dquDygeLvXE/s113/Lalit+Raghuvanshi.jpg" alt="Lalit Raghuvanshi" class='roundimage' style="width:150px"><br />Rounded Image
    </div>
</body>
</html>

Explanation: We have applied the Css class ‘roundimage’ that we created to the image to make this image round. Try this with your own image. Just add your image as a source to the image above and see the results.

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..