1. Dimensions & Borders

width / height

Sets the size in pixels (px) or percentages (%).

img { width: 300px; height: 200px; }

border

Adds an outline with width, style, and color.

img { border: 5px solid white; }
IMAGE PREVIEW

2. Border Radius (Shapes)

The border-radius property rounds the corners of an image.

  • 10px: Soft corners
  • 50px: Oval shape
  • 50%: Perfect Circle (if square)
img { border-radius: 50%; }
CIRCLE

3. The Object-Fit Property

Controls how the image behaves when forced into a specific size.

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Cover: Fills area without stretching (crops edges).
Contain: Fits entire image inside (adds bars).

OBJECT-FIT: COVER

NO STRETCH

Complete Styled Image

Combining all properties for a high-end look.

img {
  width: 300px;
  height: 300px;
  border: 4px solid #8b5cf6;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 20px #000;
}
FINAL RESULT