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 Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:1px solid #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Thick Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:10px solid #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Thin Dotted Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:1px dotted #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Thick Dotted Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px dotted #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Thin Dashed Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:1px dashed #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Thick Dashed Picture Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px dashed #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Grooved Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px groove #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Double Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px double #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Outset Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px outset #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Inset Image Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px inset #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

Ridged Picture Border

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img style="border:5px ridge #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

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 Code

Result

<!-- Codes by HTMLcodes.me --> <img style="border-top:1px solid #6495ED;border-right:1px dotted #6495ED;border-bottom:15px ridge #6495ED;border-left:30px solid #6495ED;" src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>

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 Code	Result
<!-- Codes by HTMLcodes.me --> <img src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" border="5" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/image-border.cfm">Image border codes</a></p>