HTML Image Borders

This page contains copy/paste HTML image border codes. These are codes that create borders around your HTML images. You can take these codes and modify them for your own use.

You create HTML image borders by using Cascading Style Sheets (CSS). Specifically, you use the CSS border property. You can also use other CSS properties to create HTML borders (such as border-width, border-style and border-color), but these don't do anything that border doesn't do. That's because border is shorthand for those other properties.

When you use the border property, you need to supply three parameters; Width, Style, and Color. The code looks something like this: border:1px solid black

Below are examples of HTML image borders. The code is provided and you can copy/paste and modify as you wish.

Source Code	Result
<img style="border:1px solid black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border:10px solid black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border:10px outset silver;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border:1px dashed DarkSlateBlue;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border:5px groove gold;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border:5px double black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Variations of Image Borders

You can create different variations of your HTML image borders if you like. For example, you could have a different style of border on each side of your image. Or you could have a different width or color on different sides. You could also choose to only have a border on one side. Be creative!

CSS provides four properties for defining border properties for each side of your image. These are border-top, border-right, border-bottom, and border-left.

Below are some examples of these types of variations.

Source Code	Result
<img style="border-top:2px solid black;border-right:5px double black;border-bottom:10px solid black;border-left:20px solid black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Source Code	Result
<img style="border-top:20px solid black;border-right:1px solid black;border-bottom:20px solid black;border-left:1px solid black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

You can also combine the border property with the other properties. For example, you can set the border properties of all sides using border property, then override one or more sides using the other, more specific properties.

Example:

Source Code	Result
<img style="border:1px solid black;border-bottom:20px solid black;" src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />

Background Images

Another way to add an image to a web page is to add the image as a background image.

Linked Images

You can also have linked images on your web page. These are images that, when clicked on, open another web page or URL. To create a linked image, see our HTML Links page.