Skip to content
Related Articles

Related Articles

CSS | Styling Images
  • Difficulty Level : Expert
  • Last Updated : 06 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

Styling an images using CSS works exactly the same way as styling any element using the Box Model of padding, borders and margins.

There are many ways to set style in images which are listed below:

  • Thumbnail images
  • Rounded images
  • Responsive Images
  • Transparent Image
  • Center an Image

Thumbnail images: The border property is used to create thumbnail images.

Example:




<!DOCTYPE html>
<html>
    <head>
        <title>Thumbnail image</title>
        <style>
            img {
                border: 1px solid black;
                border-radius:5px;
                padding:5px;
            }
    </style>
    </head>
      
    <body>
        <img src =
        alt = "thumbnail-image" style = "width:400px">
    </body>
</html>                    

Output:



Border-radius Property: The border-radius property is used to set the radius of border image. This property can contain one, two, three or four values. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Example:




<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <img src
        alt = "rounded-image" width="400" height="400">
    </body>
</html>                    

Output:

Responsive Images: The responsive image is used to adjust the image automatically to the specified box.

Example:




<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
        <img src=
        alt="Responsive-image" width="1000" height="300">
    </body>
</html>                    

Output:

Transparent Image: The opacity property is used to set the image transparent. The opacity value lies between 0.0 to 1.0.

Examples:




<!DOCTYPE html>
<html>
    <head>
        <title>style image</title>
        <style>
            img {
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <img src=
        alt="Transparent-image" width="100%">
    </body>
</html>                    

Output:

Center an Image: The images can be centered to box by using left-margin and right-margin property.

Example:




<!DOCTYPE html>
<html>
    <head>
        <title>style image</title>
        <style>
            img {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <img src=
        alt="centered-image" style="width:50%">
    </body>
</html>                    

Output:

Supported Browsers: The browsers supported by Styling Images are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :