How to add Border to Image in HTML

Hey Friends I hope you are doing well, If you are searching for How to add Border to Image in HTML then you are at the right place here is the complete tutorial to add Border around image in HTML.

Users can add border to image by using HTML and also CSS. With HTML user can create basic border to image but with CSS it can be more stylish.

Here is the complete tutorial to add a border to the image by using HTML.

As you can see below screenshot there are two images first one is without borders and is second image with borders.

How to add a Border to an Image in HTML

If you want to do this process with HTML then you have to use the “border” in <img>.
This is the simple way to add a border around the image.

Now for the first image, there is no border but for the second image, there is a border with 5 thickness as you can see in the HTML code below.

<head>
    <title>Image with Border</title>
</head>
<body class="img">

    <img src="https://www.procreatorblog.com/wp-content/uploads/2023/05/ezgif.com-crop-1536x2048.webp">
        <img src="https://www.procreatorblog.com/wp-content/uploads/2023/05/ezgif.com-crop-1536x2048.webp" border="5">

</body>
</html>

Code explanation

<img> : This tag is used to embed an image in a web page. This tag has several attributes like “scr” for the source of destination of the image and ‘alt’ for alternative text for the image if in case the image does not displayed then alternate text will be.

Also See -->  Realme UI 5.0 Roadmap ( Official )

border : It is used to add a border to an image with the thickness.

Conclusion

In this way, users can add borders to images in HTML. There are also CSS methods to add borders and it is advanced but this is what we can do with HTML.

Leave a Comment

Google Play store Latest update v37.4.24 Unlocking Stunning Photography with Realme GCam Realme C55 New update ( Change in Mini Capsule feature ) PUBG Mobile Beta Version 2.6 – Whats new, How to Download