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.
In previous articles I have explained How to hide first / last or nth column of table before printing using css and Convert text to uppercase or lowercase while typing in asp.net textbox using css and Create jquery scrollable gridview with fix header in asp.net c#,vb and Highlight gridview row on mouse over using css in asp.net and Change border and background color of asp.net controls on validation failure using javascript and 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.
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..