Image Border

This page contains "image border" code. That is, HTML code that displays an image with a border. This enables you to add a picture to your website with a border around it. Feel free to copy and paste this HTML/CSS code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

About Image Border Code

To create an image border in HTML, you need to use CSS. Well, technically, you can use HTML borders too but CSS gives you far more choices.

CSS Image Border

Most of the examples on this page display image borders created with CSS. This is because CSS provides you with far more flexibility when it comes to drawing borders around your images.

The quickest way to create a border in CSS is to use the border property. This property is shorthand for specifying everything about the border. For example, you can specify the border width, style, color, etc. You can also specify different properties for each side of the picture.

Below are examples of what you can do with a picture border using CSS.

Thin Image Border

Source CodeResult
Cartoon drawing of city skyline

Thick Image Border

Source CodeResult
Cartoon drawing of city skyline

Thin Dotted Image Border

Source CodeResult
Cartoon drawing of city skyline

Thick Dotted Image Border

Source CodeResult
Cartoon drawing of city skyline

Thin Dashed Image Border

Source CodeResult
Cartoon drawing of city skyline

Thick Dashed Picture Border

Source CodeResult
Cartoon drawing of city skyline

Grooved Image Border

Source CodeResult
Cartoon drawing of city skyline

Double Border

Source CodeResult
Cartoon drawing of city skyline

Outset Image Border

Source CodeResult
Cartoon drawing of city skyline

Inset Image Border

Source CodeResult
Cartoon drawing of city skyline

Ridged Picture Border

Source CodeResult
Cartoon drawing of city skyline

Mixed Image Border

Here, we need to use border-top, border-right, border-bottom, and border-left to specify the border properties for each side of the image.

Source CodeResult
Cartoon drawing of city skyline

HTML Image Border

As mentioned, you can also create borders using HTML. This method isn't very flexible - you can only specify the border width - therefore you're better off using CSS to create your borders (like in the above examples). But, in case you're interested, here's how you create an image border in HTML.

To create a picture border in HTML, you use the border attribute within the img tag. For example, to create a border that is 5 pixels thick, you could use: border="5". Here's an example:

Source CodeResult
Cartoon drawing of city skyline