Create Images with Rounded Borders using CSS Box Shadow

C
Published in: CSS

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>
Published in: CSS

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch