CSS Styling Images Last Updated : 04 Jan, 2025 Comments Improve Suggest changes Like Article Like Report CSS allows you to apply various styles to images, making them more responsive, visually appealing, and interactive. You can modify the appearance and behaviour of images on your webpage by using CSS properties like border-radius, box-shadow, filter, and others.Thumbnail ImagesThe border property helps create thumbnail images by adding a border around the image, giving it a clean, defined look. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { border: 1px solid black; border-radius: 5px; padding: 5px; } </style> <!--Driver Code Starts--> </head> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="thumbnail-image" style="width:400px"> </body> </html> <!--Driver Code Ends--> The border property defines the size and color of the image's border.Width and height properties set the dimensions of the thumbnail image.Border-radius Property The border-radius property rounds the corners of the image, creating a circular or oval shape, based on the values provided. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { border-radius: 50%; } </style> <!--Driver Code Starts--> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/forkandgeeksclassesV-min.png" alt="rounded-image" width="400" height="400"> </body> </html> <!--Driver Code Ends--> border-radius: 50% creates a circular image when applied to a square image.Width and height define the size of the image.Responsive ImagesResponsive images automatically adjust to fit the container size, ensuring they look good on different screen sizes. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { max-width: 100%; height: auto; } </style> <!--Driver Code Starts--> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Responsive-image" width="1000" height="300"> </body> </html> <!--Driver Code Ends--> width: 100% makes the image adjust to the container's width.height: auto ensures the image maintains its aspect ratio.Transparent ImageThe opacity property is used to make an image transparent. The value ranges from 0 (fully transparent) to 1 (fully opaque). HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { opacity: 0.5; } </style> <!--Driver Code Starts--> </head> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Transparent-image" width="100%"> </body> </html> <!--Driver Code Ends--> opacity: 0.5 makes the image semi-transparent.The image will appear with reduced opacity, allowing the background to be seen through itCenter an ImageTo center an image within a container, you can use margin and display properties. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> img { display: block; margin-left: auto; margin-right: auto; } </style> <!--Driver Code Starts--> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="centered-image" style="width:50%"> </body> </html> <!--Driver Code Ends--> display: block makes the image behave like a block element.margin-left: auto and margin-right: auto center the image horizontally. Comment More infoAdvertise with us Next Article CSS Styling Images C Chandu_Siddartha Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2018 Similar Reads CSS overflow-y Property The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element's top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property. Syntax: overflow-y: scroll | hidden 5 min read CSS background-blend-mode Property The background-blend-mode Property defines how the element's background image should blend with each other and with the element's background-color. Syntax: background-blend-mode: normal|multiply|screen|darken|lighten|color-dodge|saturation|difference|luminosity|overlay;Default Value: normalProperty: 5 min read CSS font-style Property The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text 4 min read CSS clip Property The clip property specifies defining what portion of an absolutely positioned element you want to make visible. Except for the specified region, the rest all other the regions are hidden. The clip property is only applicable to the absolutely positioned element ie., the element having the position: 4 min read CSS border-right-color Property The border-right-color Property is used to set the color of the right-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-right-color property. Syntax:border-right-color: color|transparent|initial|inherit; Property Values: color: It s 3 min read CSS border-bottom-left-radius Property The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border i.e. it makes the bottom-left of the border rounded.Syntax: border-bottom-left-radius: length|% [length|%]|initial|inherit;Default Value: its default value is 0. Property Value: Length: This p 3 min read CSS border-left-width Property The border-left-width property in CSS specifies the width of an element's left border. You can set this width using various units like pixels, ems, or percentages. This property allows for precise control over the left border's thickness, contributing to the element's overall design and layout.Synta 4 min read CSS border-left-color Property The border-left-color Property is used to set the color of the left-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-left-color property. Syntax:border-left-color: color|transparent|initial|inherit; Property Valuescolor: It sets th 3 min read CSS padding-bottom Property An element's padding is the space between its content and its border. The padding-bottom CSS property is used to set the height of the padding area on the bottom of an element. Syntax:padding-bottom: length|percentage;Property values:length: This value is used to specify the size of padding as a fix 3 min read CSS margin-bottom Property The CSS margin-bottom property is used to specify the amount of margin to be used on the bottom of an element. The margin can be set in terms of length or percentage. Syntax:margin-bottom: <length> | <percentage> | autoProperty values:Length: This value specifies the length of the margin 3 min read Like