Javatpoint Logo
Javatpoint Logo

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.


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.


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.


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.


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.


Test it Now
Next TopicCSS Overflow

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA