CSS Style images

CSS Style images helps us to style the images in various forms.

CSS Style images-properties

• The border property is used to set the width of an image border.
• The height property is used to set the height of an image.
• The width property is used to set the width of an image.

Border property

The border property of an image is used to set the width of an image border:

 <img style = "border:5px red;" src = "media/flower.jpeg" />

CSS border-radius property to create rounded images:

img {
  border-radius: 10px;
}

Responsive property

CSS Responsive images will automatically adjust to fit the size of the screen.

img {
  max-width: 200%;
  height: auto;
}

Transparent property

CSS opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image:

img {
  opacity: 0.4;
}

Center property

To center an image, set left and right margin to auto and make it into a block element:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}