Sponsored Links

$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

HTML Image Borders

Related:
• CSS 'border' Specification
• Comment Box Borders
• HTML Borders
• HTML Color Codes

To change the appearance of image borders, you need to use CSS (Cascading Style Sheets). You can include CSS in your images using the style attribute of the HTML img tag. You can use the HTML code on this page to determine image borders within your HTML document.

Below are some examples of what you can do with HTML image borders using CSS.

Solid Border

<!-- HTML codes by Quackit.com -->
<img style="border:1px solid black;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Dotted Border

<!-- HTML codes by Quackit.com -->
<img style="border:2px dotted #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Grooved Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px groove #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Double Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px double #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Thick Solid Border

<!-- HTML codes by Quackit.com -->
<img style="border:60px solid #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Outset Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px outset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Inset Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px inset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Ridged Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px ridge #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Dashed Border

<!-- HTML codes by Quackit.com -->
<img style="border:6px dashed #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

Mixed Border

<!-- HTML codes by Quackit.com -->
<img style="border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<p style="font-family:sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a></p>

This code results in:

The above code uses the CSS border property which is shorthand for the various border properties (such as border-style, border-color etc. For more info, check out the various border properties on the CSS Properties list.

Enjoy this website?

Add this page to your Favorites
Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/html_image_borders.cfm">HTML Image Borders</a> from Quackit.com
Help support Quackit by making a donation
Add this page to your favorite social bookmarks sites: