How to add a border to an image using CSS

Use the border CSS property to add a border to an image on a web page. You’re able to specify the width, line type and color of the border when doing so.

In this example, you have a HTML page containing an image to which you’ve assigned the class my-image:

<img class="my-image" src="/path/to/image.jpg" width="280px" height="180px" alt="This is an image">

To add a border to the image, use the border CSS property, as follows:

.my-image {
	border: 6px solid #663399;
}

That’s all there is to it! You should now see a border around your image.