CSS | Styling Images

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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-botton-left-radius, border-bottom-right-radius.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

Examples:


filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.