Prev Next

CSS Style Images

CSS provides various properties to style images, enhancing their appearance and fitting them seamlessly into your design. You can apply borders, shadows, filters, and more to images using CSS.

Key Topics

Image Border

Add borders to images using the border property. You can customize the border width, style, and color.

<style>
        .image-border {
            width: 200px;
            border: 5px solid #007BFF;
        }
</style>
<img src="example.jpg" alt="Example" class="image-border">

Explanation: The image is styled with a 5px solid blue border, making it stand out on the page.

Rounded Corners

Create rounded corners on images using the border-radius property.

<style>
        .image-rounded {
            width: 200px;
            border-radius: 15px;
        }
</style>
<img src="example.jpg" alt="Example" class="image-rounded">

Explanation: The corners of the image are rounded by 15px, giving it a softer appearance.

Image Shadow

Apply shadows to images using the box-shadow property to create a depth effect.

<style>
        .image-shadow {
            width: 200px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        }
</style>
<img src="example.jpg" alt="Example" class="image-shadow">

Explanation: The shadow gives the image a floating effect, making it visually appealing.

Image Filters

Use the filter property to apply effects like grayscale, blur, brightness, and more to images.

<style>
        .image-filter {
            width: 200px;
            filter: grayscale(50%) brightness(120%);
        }
</style>
<img src="example.jpg" alt="Example" class="image-filter">

Explanation: The image is styled with a 50% grayscale effect and increased brightness for a modern look.

Key Takeaways

  • Image Borders: Use the border property to add outlines to images.
  • Rounded Corners: Apply the border-radius property for a softer appearance.
  • Shadows: Use the box-shadow property to add depth to images.
  • Filters: Style images with effects like grayscale, blur, and brightness for unique designs.
  • Customization: Combine multiple properties to create visually appealing and consistent image styles.
Prev Next