How can I add a border to an image using HTML?
110 Answers
Two ways:
<img src="..." border="1" />or
<img style='border:1px solid #000000' src="..." />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" />You can also add padding for a nice effect.
<img src="image.png">I also prefer CSS over HTML; HTML is about content, CSS about presentation.
With CSS you have three options.
- Inline CSS (like in Trevor's and Diodeus' solutions). Hard to maintain, and doesn't guarantee consistency: you'll have to check yourself that every image has the same border-width and border-color.
- Internal stylesheet. Solves the consistency issue for all images on the page having, but you'll have to include a stylesheet for each page, and again make sure "hasBorder" is defined the same each time.
- External stylesheet. If you include a link to the external CSS file on each page all images with on all pages will have the same border.
Example using internal stylesheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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 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" />CSS
img{border:2px solid black;}border="1" ON IMAGE tag or using css border:1px solid #000;
Jack,
You can learn a great deal about borders, and how to use them at . 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" />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> <img src="picture.jpg" alt="My Picture" />
</div>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.
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:
1The 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.
1
