HTML Image Borders

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

Code

Result

<img style="max-width:95%;border:3px solid black;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

More info: HTML <img> Tag, HTML Images, CSS border Property.

Dotted Border

Code

Result

<img style="max-width:95%;border:2px dotted #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

More info: HTML <img> Tag, HTML Images, CSS border Property.

Grooved Border

Code	Result
<img style="max-width:95%;border:6px groove #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Double Border

Code	Result
<img style="max-width:95%;border:6px double #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Outset Border

Code	Result
<img style="max-width:95%;border:6px outset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Inset Border

Code	Result
<img style="max-width:95%;border:6px inset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Ridged Border

Code	Result
<img style="max-width:95%;border:6px ridge #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Dashed Border

Code	Result
<img style="max-width:95%;border:6px dashed #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

Mixed Border

Code	Result
<img style="max-width:90%;border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

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 page?

2. 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
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!