How to Add Borders to an Image in HTML & CSS?

Adding a border around an image can change its overall look and appearance. For example, a border with a strong, contrasting color can create a sense of visual weight and draw the viewer’s eye towards the image.

In CSS, you can very easily add borders around an image. You basically need three things to add the border around an image, the border width, border style, and the border color.

To specify these three parameters, you can either use the border shorthand property or its sub-properties.

The border property is a shorthand of the following three sub-properties:

• border-width
• border-style
• border-color

The border-width can be specified in any CSS length unit such as px, pt, em, cm, etc. However, we generally use the pixels to specify the border width.

The border style can be solid, dashed, dotted, etc.

The border color can be any valid color such as a color name eg. red, green, blue, etc. or any color value in HEX, RGB, or HSL, color formats.

Let’s say we have an image cat.jpg in our HTML file:

<div>
    <img src="images/cat.jpg">
</div>

Now, we want to add a red color solid border around this image.

For that, we have to specify three factors, the border width, border style and the border color in our CSS file:

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border: 2px solid red;  /* Img border */
}

Sample Output:

Image Border with Padding

To give a better visual appearance to the image, it is recommended to add a small padding around the image and then add the border.

To add the padding around the image, you can use the padding property of CSS.

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border: 3px solid red;  /* Img border */
    padding: 3px;  
}

Sample Output:

Changing Image Border Styles

In the last two examples, we used only the solid border style to add a border around the image.

However, there are a lot of other built-in border styles available in CSS such as dashed, dotted, groove, etc. that you can use to add around the image.

Below is the list of all the border styles available in CSS:

• dotted – Specifies a dotted border
• dashed – Specifies a dashed border
• solid – Specifies a solid border
• double – Specifies a double border
• groove – Specifies a 3D grooved border
• ridge – Specifies a 3D ridged border
• inset – Specifies a 3D inset border
• outset – Specifies a 3D outset border
• none – No border is added to the element
• hidden – Border remains hidden

In the following example, we have added a 3px thickness, red color, dashed border around the image:

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border: 3px dashed red;  /* Dashed border */
    padding: 3px;  
}

Sample Output:

Making Image Borders Rounded

To make the corners of an image rounded, you can use the border-radius property. The border-radius can be specified in any CSS length unit such as px, em, rem, cm, etc.

A higher value of the border-radius makes the corners of the element more rounded.

In the following example, we have added a border-radius of 20px to the image. This will make its corners rounded:

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border: 3px solid red;  /* Img border */
    padding: 3px;  
    border-radius: 20px; /* Make corners rounded */
}

Sample Output:

Adding a Circular Border to the Image

If the width and height of the image are equal and you set its border-radius to 50%, the image and its border(if any) will become a perfect circle.

In the following example, we have set the border-radius of the image to 50%, this will make it a perfect circle as its width and height are same:

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border: 3px solid red;  /* Img border */
    padding: 3px;  
    border-radius: 50%; /* Make Image Circular */
}

Sample Output:

Adding Different Borders to Each Side of the Image

The border property is actually a shorthand for specifying the border for all four sides of the element. This means if you use the border property to add the border to an element, the same border will be added to each side of the element.

But this might not always be the case. There can be situations where you need to add a different border to each individual side of the element.

In such situations, you can use the following four border properties:

• border-top
• border-bottom
• border-left
• border-right

Each property specifies the border for the respective side of the element and uses the same syntax as the border property to specify the border.

In the following example, we have specified different borders for each individual side of the element:

img{
    width: 200px;   /* Img width */
    height: 200px;  /* Img height */
    border-top: 4px solid red;  /* Top Border */
    border-right: 4px dashed blue; /* Right border */
    border-bottom: 4px groove orange; /* Bottom border */
    border-left: 4px solid green; /* Left border */
    padding: 3px;  
    
}

Sample Output:

Conclusion

In this article, we learned how we can add a border to an image in CSS.

In summary, if you want to add a border to an image you can use the border property of CSS. The border property needs three parameters border width, border style and border color to add a border to an element/image.

You can also use the border-top, border-right, border-bottom and border-left properties to specify different borders for each side of the image.

Thanks for reading.