Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.
Syntax
.img-class {
border: 1px solid black;
}Adding a Border To An Image With HTML and CSS
- Create a CSS class named .image to style the image, including its width, height, and border.
- In the CSS, set the image width to 300px and the height to auto so it maintains its aspect ratio.
- Use the border property in the CSS class to add a solid black border that is 5px wide around the image.
- Add the class name image to the <img> tag in the HTML to apply the styles defined in the CSS.
Output
👁 image-border
