CSS Image Styling

Learn how to style images using CSS.

Rounded Images

You can use the border-radius property to create rounded images:

Example

img {
  border-radius: 8px;
}

Example

img {
  border-radius: 50%;
}

Tip: Look at the CSS Image Shapes chapter to learn how to shape (clip) images to circles, ellipses and polygons.

Thumbnail Images

Use the border property to create thumbnail images:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

Thumbnail image as a link:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {

  box-shadow: 0 0
2px 1px rgba(0, 140, 186, 0.5);
}

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example

img {
  max-width: 100%;
  height:
auto;
}

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

Polaroid Images / Cards

Cinque Terre

Northern Lights

Example

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

Responsive Image Gallery

CSS can be used to create responsive image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Example

  @media only screen and (max-width: 768px) {
  div.gallery-item {

  width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {

  div.gallery-item {
    width: calc(100% - 20px);
  }
}

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.