How to add a border around an image?
Image is an important component of the webpage. We frequently use the image on the website. The CSS properties can be used to customize the image. Here, we will learn to add a border around the image.
Using CSS border property
The border property can be used to add borders to the <image> element. We can also customize border width and color using the border property.
Example: Add a border to the image
In this example, we have added a border of width 2px and the color of the border is blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
img {
border: 2px solid blue;
}
</style>
</head>
<body>
<h1>Adding border to the image</h1>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1626774502-101156.png" alt="image">
</body>
</html>
Output
Here is the output of the above program.
Example: Style the border with CSS
In this program, we have added background color along with border property.
Conclusion
In this tutorial, we have used the CSS border property to add a border to an image. We have added solid borders in the examples, we can also add the dotted borders by replacing solid values with dotted.
