CSS Image Styling

An <img> tag on its own is just a raw rectangle of pixels — CSS is what gives it rounded corners, a border, a drop shadow, a filter effect, and the ability to resize gracefully with its container.

In this page:

Rounding Image Corners
Borders and Shadows on Images
Filter Effects on Images
Responsive Images with max-width
object-fit for Cropped Images

Syntax

css

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

Rounding Image Corners

Applying border-radius to an <img> works exactly like it does on any other box, rounding the image's corners or, at 50%, turning a square image into a perfect circle. Because the image itself is clipped to the rounded box, no extra masking property is needed for this simple case.

Note:

Accepted values:
border-radius: <length> — rounded corners in px, em, rem
border-radius: <percentage> — relative to the box size
border-radius: 50% — circle on a square, ellipse otherwise
border-radius: A B C D — top-left, top-right, bottom-right, bottom-left
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Rounding Image Corners

css

<style>
img {
  border-radius: 50%;
}
</style>
<img src="https://placehold.co/100x100" alt="Circular image">

Borders and Shadows on Images

A regular border property draws a frame around an image just as it would around a div, and box-shadow adds a drop shadow behind it — combining both is a common way to make a photo look like a printed card sitting above the page.

Note:

Accepted values:
border: <width> <style> <color> — solid, dashed, dotted, etc.
box-shadow: <x> <y> <blur> <spread> <color> — drop shadow around the box
box-shadow: inset ... — shadow inside the box; none is the default
outline: <width> <style> <color> — does not affect layout
border-radius — rounds the border and shadow
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Borders and Shadows on Images

css

<style>
img {
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
</style>
<img src="https://placehold.co/150x100" alt="Framed like a printed card">

Filter Effects on Images

The filter property applies effects like grayscale(), blur(), brightness(), and sepia() directly to an image's pixels without needing an image editor, and these filters can be combined and even transitioned smoothly on hover.

Note:

Accepted values:
filter: none — no effect (default)
filter: grayscale(<n>) — 0 to 1
filter: sepia(<n>) — 0 to 1
filter: blur(<length>) — blur radius
filter: brightness(<n>) — 1 is unchanged
filter: hue-rotate(<angle>) | drop-shadow() — shift hues, shadow
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Filter Effects on Images

css

<style>
img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}
img:hover {
  filter: none;
}
</style>
<img src="https://placehold.co/150x100" alt="Grayscale, hover to see color">

Responsive Images with max-width

Setting max-width: 100% (with height: auto) on an image lets it shrink to fit its container on small screens while never stretching wider than its natural size, which is the single most common responsive-image rule on the web.

Note:

Accepted values:
max-width: 100% — never exceed the parent's width
max-width: <length> — cap in px or rem
max-width: none — default, no cap
height: auto — keeps the aspect ratio
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Responsive Images with max-width

css

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
<img src="https://placehold.co/1200x600" alt="Shrinks but never grows past natural size">

object-fit for Cropped Images

When an image doesn't match its container's aspect ratio, object-fit: cover crops it to fill the box without distorting it, while object-fit: contain shrinks it to fit entirely inside the box, leaving empty space if needed.

Note:

Accepted values:
fill — default, stretches to the box
contain — fits inside, keeps ratio, may letterbox
cover — fills the box, keeps ratio, may crop
none — natural size, no resizing
scale-down — the smaller of none or contain
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: object-fit for Cropped Images

css

<style>
.cover {
  width: 150px;
  height: 100px;
  object-fit: cover;
}
.contain {
  width: 150px;
  height: 100px;
  object-fit: contain;
}
</style>
<img class="cover" src="https://placehold.co/400x200" alt="Cropped to fill">
<img class="contain" src="https://placehold.co/400x200" alt="Shrunk to fit entirely">

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Animations Next Lesson → CSS Image Effects

CSS Image Styling

Rounding Image Corners

Borders and Shadows on Images

Filter Effects on Images

Responsive Images with max-width

object-fit for Cropped Images

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code