How to Create Border Around Image

Border Around Image

How To, for Front End and Web Applications

By: Chrysanthus Date Published: 27 May 2025

This tutorial explains How to Create Border Around Image. The border is not around the container for the image. It is around the image itself, at the four sides.

At the end of this tutorial is the complete code. The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate border around image). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage. The reader is advised to do that before continuing to read this tutorial.

The Webpage Skeleton Code

The webpage skeleton code to which more useful code will be added is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Border Around Image</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>

        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>

    </body>
    </html>

Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element in the head element is the style-sheet. It is very short, for this project. It is the main coding for each image. The JavaScript element will be left empty. The body element will have the image tags.

The HTML Body Element Content

The content of the HTML body element is:

        <h2>Border Around Image</h2>
        <p>Use the border property to add a border to an image:</p>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow.jpg" alt="Snow" style="width:150px">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature.jpg" alt="Nature" style="width:150px">

Two image tags are there. At the source (website) of the images, the images are rectangles. Each image has the width, 150px, as specified by the attribute, "style='width:150px' ". When the width of an image is specified, the browser scales the height of the image appropriately. The height of the image does not have to be specified.

Strategy

There should be no padding between the border and the image proper. Padding is the gap between the image and its border. The border is an extra width surrounding the image and can be given different colors. For this project the color is green.

The Stylesheet

The stylesheet is the content of the style element in the head element. It is just:

            img {
                border: 5px solid green;
            }

That is all ! There is just one CSS rule, which is the image CSS rule. The selector for the CSS rule is "img" and it is applicable to all images in the body element. The solid border is green and 5px thick.

The Complete Webpage Code

And there you have it: the complete webpage code is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Border Around Image</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>
            img {
                border: 5px solid green;
            }
        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>
        <h2>Border Around Image</h2>
        <p>Use the border property to add a border to an image:</p>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow.jpg" alt="Snow" style="width:150px">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature.jpg" alt="Nature" style="width:150px">
    </body>
    </html>

The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate border around image). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage.

Chrys

Broad Network

Series Articles