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 CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
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 CodeResult
Photo of Milford Sound in New Zealand
Source CodeResult
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 CodeResult
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.

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

My Related Sites

Here are some of my other sites: