CSS Images

Images are an important part of any web application. Including a lot of images in a web application is generally not recommended, but it is important to use the images wherever they required. CSS helps us to control the display of images in web applications.

The styling of an image in CSS is similar to the styling of an element by using the borders and margins. There are multiple CSS properties such as border property, height property, width property, etc. that helps us to style an image.

Let's discuss the styling of images in CSS by using some illustrations.

Thumbnail Image

The border property is used to make a thumbnail image.

Example

Test it Now

Transparent image

To make an image transparent, we have to use the opacity property. The value of this property lies between 0.0 to 1.0, respectively.

Example

Test it Now

Rounded image

The border-radius property sets the radius of the bordered image. It is used to create the rounded images. The possible values for the rounded corners are given as follows:

  • border-radius: It sets all of the four border-radius property.
  • border-top-right-radius: It sets the border of the top-right corner.
  • border-top-left-radius: It sets the border of the top-left corner.
  • border-bottom-right-radius: It sets the border of the bottom-right corner.
  • border-bottom-left-radius: It sets the border of the bottom-left corner.

Example

Test it Now

Responsive Image

It automatically adjusts to fit on the screen size. It is used to adjust the image to the specified box automatically.

Example

Test it Now

Center an Image

We can center an image by using the left-margin and right-margin property. We have to set these properties to auto in order to make a block element.

Example

Test it Now
Next TopicCSS Overflow




Contact US

Email:[email protected]

CSS Images
10/30