Create Images with Rounded Borders using CSS Box Shadow
You can take any rectangular image and apply the following CSS style to transform that image into a circular one with drop shadows and borders without editing the original images.
To get started, simple replace the background-image URL in the DIV with your own image. Perfect for display the author photos in your blog’s sidebar. The height and width attributes of the .circle class may have to be adjusted based on the size of the profile image.
<div
class="circle"
style="background-image:
url('img_url_here')"
></div>
<style>
.circle {
display: block;
width: 150px;
height: 150px;
margin: 1em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border-radius: 99em;
border: 5px solid #eee;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
</style>
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
