CSS Images

The styling of an image in CSS is similar to the styling of an element by using the borders and margins properties. There are various CSS properties such as border, height, and width properties, etc. that help us to style an image.

Thumbnail Image:

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
h2{
color:red;
}
  </style>
</head>

<body>
<h1>Thumbnail Image</h1>
<img src="good-morning.jpg"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

OUTPUT:

CSS Images

Transparent image:

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;
}
h2{
color:red;
}
  </style>
</head>

<body>
 <h1>Transparent Image</h1>
<img src="good-morning.jpg"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

OUTPUT:

CSS Images

Rounded image:

The possible values for the rounded corners :

border-radius
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius

Example:

<!DOCTYPE html>
<html>
<head>
  <style>

#img{
border: 2px solid green;
border-radius:50%;
padding:5px;
}

h2{
color:red;
}
  </style>
</head>

<body>


<h1>Circle Image</h1>
<img src="good-morning.jpg" id="img"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

OUTPUT:

CSS Images

Responsive Image:

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
  </style>
</head>

<body>
<h1>Responsive image</h1>
<img src="good-morning.jpg" id="img1" width="1000" height="300"></img>
</body>
</html>

OUTPUT:

CSS Images

Center an Image:

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
#img1{
margin-left:auto;
margin-right:auto;
display:block;
}
h1,h2{
text-align:center;
}
  </style>
</head>

<body>
<h1>Center image</h1>
<img src="good-morning.jpg" id="img1"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

OUTPUT: