Codes, Css

Make Image Round with Shadow using CSS

Written by Sarmad Gardezi November 30, 2017

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.

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

Free Online Image Hosting

Host your Images Online for free & use them on Website Blogs and Social Media.

Host Image Now Featured
Online Dictator

Convert your Speech into Text. You can either copy, Download or Share it Online for free.

Try it Now Popular
My First Tweet

Find first tweet on Twitter and retweet it to amaze people.

Lets Go! Trending

Subscribe to our Email Newsletter