How To Add Border to an Image using HTML and CSS ?

Last Updated : 04 Dec, 2023

In this article, we will see how to add a border to an image using CSS. First, we add an image using <img> tag and then set the width and height of the image. After that, we use CSS border property to add a border to the image.

Syntax:

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

Example 1: In this example, we will add borders to the image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        Add a Border to an Image using HTML and CSS 
    </title> 
  
    <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

Example 2: In this example, we will add the image border with border radius.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        Add a Border to an Image using HTML and CSS 
    </title> 
  
    <style> 
        .image { 
            width: 300px; 
            height: auto; 
  
            /* Set the border */ 
            border: 5px solid black; 
  
            /* Set the border radius */ 
            border-radius: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <img class="image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp"
        alt="Image"> 
</body> 
  
</html>