Images are an essential part of the digital world.
They can convey the intended message more effectively than text.
It is crucial to present the images attractively to keep the audience engaged.
A simple way to enhance the appearance of an image is by adding a border around it.
In this tutorial, we will discuss how to add a border around an image using HTML and CSS.
HTML
HTML provides a simple tag to add images, i.e., <img> tag.
The tag supports several attributes to add various styles to an image. The “style” attribute is used to add CSS to an HTML element, including images.
CSS
CSS is a stylesheet language that adds style to HTML elements. In CSS, the “border” property is used to add a border around an element.
The border property is a shorthand property that sets the values for border-width, border-style, and border-color.
The syntax for the border property is:
border: width style color;
Code Example
<!DOCTYPE html>
<html>
<head>
<style>
.image-border {
border: 5px solid black;
}
</style>
</head>
<body>
<img src="image.jpg" class="image-border">
</body>
</html>
Explanation
In the above code example, we have added a class “image-border” to the tag.
This class has a CSS rule to add a border to the image.
The border property sets the border width to 5px, border style to solid, and border color to black.
Conclusion
Adding a border around an image is a simple way to enhance its appearance.
By using HTML and CSS, we can add a border to an image easily.
The border property in CSS provides various options to customize the border, such as border width, border style, and border color.
By using the CSS border property, we can add a professional touch to the images and make them look more attractive.
