Open In App

How to Add Border to an Image Using HTML and CSS?

Last Updated : 23 Jul, 2025
Suggest changes
Share
1 Likes
Like
Report

Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.

Syntax

.img-class {
 border: 1px solid black;
}

Adding a Border To An Image With HTML and CSS

  • Create a CSS class named .image to style the image, including its width, height, and border.
  • In the CSS, set the image width to 300px and the height to auto so it maintains its aspect ratio.
  • Use the border property in the CSS class to add a solid black border that is 5px wide around the image.
  • Add the class name image to the <img> tag in the HTML to apply the styles defined in the CSS.
HTML 
<!DOCTYPE html> <html> <head> <style>  .image {  width: 300px;  height: auto;  border: 5px solid black;  }  </style> </head> <body> <img class="image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp" alt="Image"> </body> </html>

Output

image-border


V
vkash8574
Article Tags :

Explore

Lightbox