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.
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.
Responsive Images: The responsive image is used to adjust the image automatically to the specified box.
Transparent Image: The opacity property is used to set the image transparent. The opacity value lies between 0.0 to 1.0.
Center an Image: The images can be centered to box by using left-margin and right-margin property.
Supported Browsers: The browsers supported by Styling Images are listed below:
- Google Chrome
- Internet Explorer