CSS Image
The CSS image properties used to style the image element; The CSS properties are played a very important role to design an attractive and good looking web page through the including properties:
CSS Image Properties
- border Property
- borde-radius Property
- height Property
- width Property
- Opacity Property
The CSS Image Border
The CSS border property is used to set the border of an image.
Example of Image Border
img {
border: 5px solid #ff6a00;
}
Output
The Image Border Radius Property
The CSS border-radius property is used to create rounded images.
Example of Image Border Radius
img {
border-radius: 20px;
}
Output
The Image with border-radius: 20px; CSS property
img {
border-radius: 50%;
}
Output
The Image with border-radius: 50%; CSS property
The Image Height Property
The CSS height property is used to define the height of an image.
Example of Image Height
Output
The Image Width Property
The CSS width property is used to define the width of an image.
Example of Image Width
Output
The Image Opacity Property
The opacity property is used to set the opacity (between 0.0 to 1.0) of an image like dark OR bright.
Example of Image Opacity
Output
Image without Opacity
Image with (0.2) Opacity
The Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an element; BUT filter property is not supported in Internet Explorer or Edge 12.