Add an image border

To add a side border to an image, you just need to add some CSS codes into your image html codes.

1. Add Thick border:

Below is an image with no side border around it and with the following html codes:<img src=”http://yoursite.com/flowers.jpg” alt=”" width=”50″ height=”50″ />

To add a thick grey border around the image, insert the following CSS code as highlighted in bold below:

<img style=”border: 3px solid #ecf1ef” src=”http://yoursite.com/flowers.jpg” alt=”" width=”50″ height=”50″ />

The end result:

You can adjust the border thickness by changing the border pixels or the border color by changing the color code.

2. Add Single border:

To add a single border around an image, insert the following CSS code as highlighted in bold below:

<img style=”border: 1px solid silver; padding:4px” src=”http://yoursite.com/flowers.jpg” alt=”" width=”50″ height=”50″ />

The end result:

3. Add Double border:

To add a double border around an image, add the following codes in bold:

<img style=”border: 2px double silver” src=”http://yoursite.com/x.gif” alt=”" width=”50″ height=”50″ />

The end result:

If you want every image on your side bar to have a border, you may insert the border CSS code into your stylesheet using a class tag

Adding a small border around an image would make your image more professional looking. Similarly, adding a white or light grey border around an image would look better if your image is against a color background.

If you like this post, please consider subscribing to this site’s RSS feed. You can also subscribe by email and any new posts will be sent directly to your inbox.

Tags: add border to image, border image, image border, image border CSS codes