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

Last Updated : 23 Jul, 2025

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

Comment

Explore