You can also add padding for a nice effect.
<img src="image.png" style="padding:1px;border:thin solid black;">
The answers above are very good I'm sure. But for dim-wits, like me, I recommend Snagit 10. You can give an image a border in any width, style, and color before inserting it into your webpage. They do a full working program on 30 day trial.
as said above simple line of code will fix your problems
border: 1px solid #000;
There is another option to add border to your image and that with photoshop you can see how it's done with this tutorial below: http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/
border="1" ON IMAGE tag or using css border:1px solid #000;
Here is some HTML and CSS code that would solve your issue:
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />
Two ways:
<img src="..." border="1" />
or
<img style='border:1px solid #000000' src="..." />
I also prefer CSS over HTML; HTML is about content, CSS about presentation.
With CSS you have three options.
Example using internal stylesheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>
<style type="text/css">
img.hasBorder { border:15px solid #66CC33; }
</style>
</head>
<body>
<img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>
If you want an external stylesheet, replace the <style>...</style> block with
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
The correct way depends on whether you only want a specific image in your content to have a border or there is a pattern in your code where certain images need to have a border. In the first case, go with the style attribute on the img element, otherwise give it a meaningful class name and define that border in your stylesheet.
CSS
img{border:2px solid black;}
Jack,
You can learn a great deal about borders, and how to use them at http://www.w3schools.com/css/css_border.asp. That being said, there are a couple different ways you could accomplish this.
Below is how I generally do it, but reading the documentation on w3schools you may come upon your own desired method.
.addBorder {
/* Thickness, Style, and Color */
border: 1px solid #000000;
}
<img src="mypicture.jpg" alt="My Picture" class="addBorder" />
Edit:
I noticed the original question was not "How to add a border to an image," but instead it was "how to add in a box around an image using html?" The question was re-written by others, so I'm not 100% sure you wanted a border on your image.
If you just wanted a box around your images, you could use a DIV, with it's own styles:
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>
Source: Stackoverflow.com