Circle Images


Now let's style an image to look like a circle. This is the same principal as shown in Border Radius, but by setting a radius of 50%, it will make a square image appear round. We'll also add a border and a nice drop shadow. Our image is 400px x 400px. Because we also want this image to contract in size on smaller devices, we first have to place the image into a <div> where we can control the width of the box.

The Circle Image
css for the box
  1. .photoblock {
  2.    display: block;
  3.    padding: 10px;
  4.    margin: 10px auto; /* to center the box */
  5.    max-width: 500px; /* set the maximum width of the box */
  6.    text-align: center; /* centers the box content */
  7.    background-color: #aba873;
  8.    background: radial-gradient(#aba873, #625d30);
  9. }
css for the image
  1. .photoblock img {
  2.    max-width: 100%; /* a percentage will contract on smaller devices */
  3.    height: auto; /* keeps the height proportional to the width */
  4.    border: 10px solid #fff;
  5.    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  6.    /* below the corners are rounded to half of the image width to make the circle*/
  7.    border-radius: 50%;
  8. }
  1. <div class="photoblock">
    <img alt="" src="images/mainimage01.jpg">