CSS Styling Images
Last Updated :
11 Oct, 2021
Styling images in CSS works exactly the same way as styling any element using the Box Model of padding, borders, and margins for the content. There are many ways to set style in images which are listed below:
We will discuss all the ways for styling the image sequentially & will also understand them through the examples.
Thumbnail images: The border property is used to create thumbnail images.
Example: This example illustrates the use of the Styling image property for creating the thumbnail images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Thumbnail image</title>
<style>
img {
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
</style>
</head>
<body>
<img src=
alt="thumbnail-image"
style="width:400px">
</body>
</html>
|
Output:
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.
Example: This example illustrates the use of the Styling image property for creating rounded images.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<img src=
alt="rounded-image"
width="400"
height="400">
</body>
</html>
|
Output:
Responsive Images: The responsive image is used to adjust the image automatically to the specified box.
Example: This example illustrates the use of the Styling image property for creating responsive images.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src=
alt="Responsive-image"
width="1000"
height="300">
</body>
</html>
|
Output:
Transparent Image: The opacity property is used to set the image transparent. The opacity value lies between 0.0 to 1.0.
Example: This example illustrates the use of the Styling image property for creating transparent images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>style image</title>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src=
alt="Transparent-image"
width="100%">
</body>
</html>
|
Output:
Center an Image: The images can be centered to box by using left-margin and right-margin properties.
Example: This example illustrates the use of the Styling image property for positioning the image to the center.
HTML
<!DOCTYPE html>
<html>
<head>
<title>style image</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src=
alt="centered-image"
style="width:50%">
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by Styling Images are listed below:
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...