Deprecated in HTML5. Do not use.

<img border=””>

Attribute of
<img> HTML Tag
What does <img border=""> do?
Previously used to define a border on an image element. It has been deprecated and should no longer be used.

The Old Way to Add a Border to an Image

The border attribute was previously used to add a border to an <img> element.

<!-- Do not do this. This is feature deprecated and may not work in all browsers. -->  <img src="/wp-content/uploads/flamingo.jpg" border="25"> 

This way of adding a border is deprecated in HTML5.

The Right Way to Add a Border to an Image

The right way to add a border to an image (or anything else) is to use CSS. The CSS specification provides three different border properties: border-width, border-style, and border-color.

.border {   border-width: 25px;   border-color: red;   border-style: solid; } 
<img src="/wp-content/uploads/flamingo.jpg" class="border"> 
#border-1 .border { border-width: 25px; border-color: red; border-style: solid; }

Border Styles

There are several options for border-style.

.small {  max-width: 300px;  margin: 0 15px 15px 0; }  .border {   border-width: 15px;   border-color: red; }  .dotted {   border-style: dotted; }  .dashed {   border-style: dashed; }  .solid {   border-style: solid; }  .double {   border-style: double; }  .groove {   border-style: groove; }  .ridge {   border-style: ridge; }  .inset {   border-style: inset; }  .outset {   border-style: outset; } 
<img src="/wp-content/uploads/flamingo.jpg" class="small border dotted">  <img src="/wp-content/uploads/flamingo.jpg" class="small border dashed">  <img src="/wp-content/uploads/flamingo.jpg" class="small border solid">  <img src="/wp-content/uploads/flamingo.jpg" class="small border double">  <img src="/wp-content/uploads/flamingo.jpg" class="small border groove">  <img src="/wp-content/uploads/flamingo.jpg" class="small border ridge">  <img src="/wp-content/uploads/flamingo.jpg" class="small border inset">  <img src="/wp-content/uploads/flamingo.jpg" class="small border outset"> 
#border-2 .small { max-width: 300px; margin: 0 15px 15px 0; } #border-2 .border { border-width: 15px; border-color: red; } #border-2 .dotted { border-style: dotted; } #border-2 .dashed { border-style: dashed; } #border-2 .solid { border-style: solid; } #border-2 .double { border-style: double; } #border-2 .groove { border-style: groove; } #border-2 .ridge { border-style: ridge; } #border-2 .inset { border-style: inset; } #border-2 .outset { border-style: outset; }

Mix and Match Border Styles

You can use different border styles for each side of an image.

.border {   border-width: 15px;   border-color: red; }  .mixed {   border-style: solid dashed dotted double; }  
<img src="/wp-content/uploads/flamingo.jpg" class="border mixed"> 
#border-3 .border { border-width: 15px; border-color: red; } #border-3 .mixed { border-style: solid dashed dotted double; }

Border Shorthand

If you aren’t doing anything too particular or weird, you can combine the three different border rules into the single border property`.

.border {  border: 15px solid red; } 
<img src="/wp-content/uploads/flamingo.jpg" class="border"> 
#border-4 .border { border: 15px solid red; }

Border Placement and the Box Model

Borders appear inside the margins specified on an element, but outside the padding.

#green-box {  background-color: green;  margin: 0;  padding: 0; }  #border-padding-margin{  margin: 20px;  border: 20px solid red;  padding: 20px;  background-color: yellow; } 
<div id="green-box"> <img src="/wp-content/uploads/flamingo.jpg" id="border-padding-margin"> </div> 
#border-box-demo #green-box { background-color: green; margin: 0; padding: 0; } #border-box-demo #border-padding-margin{ margin: 20px; border: 20px solid red; padding: 20px; background-color: yellow; }

Values of the border Attribute

Value NameNotes
pixelsDefined width of the border, in pixels.

All Attributes of img Element

Attribute nameValuesNotes
heightIdentifies the intrinsic height of an image file, in CSS pixels.
srcsetlist of sourcesDefines multiple sizes of the same image, allowing the browser to select the appropriate image source.
alignright
left
Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.
alttextDefines alternate text, which may be presented in place of the image.
borderpixelsPreviously used to define a border on an image element. It has been deprecated and should no longer be used.
controlsToggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
dynsrc
hspacePreviously used to add horizontal space on both side of an image. It is now deprecated.
ismapIdentifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
longdescDefines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
loopPreviously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
lowsrcSpecified a smaller or lower-quality version of an image.
nameIdentified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflagThis attribute does nothing. It was once used by a proprietary software system.
nosaveWas intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
startfileopen
mouseover
suppressUsed by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
usemapSpecifies a client-side image map to be used with the image.
widthIndicates the intrinsic width of the image, in CSS pixels.
srcSpecifies the URL of an image to be displayed.
Adam is a technical writer who specializes in developer documentation and tutorials.