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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Oct, 2021
Like Article
Save Article