How can I add a border to an image using HTML?
+20
A:
Two ways:
<img src="..." border="1" />
or
<img style='border:1px solid #000000' src="..." />
Diodeus
2009-02-20 16:58:31
whilst this is strictly correct in that it's HTML, a CSS approach is almost certainly the best answer
annakata
2009-02-20 17:07:35
+annakata's comment. You'd also preferably place the CSS in an external style sheet.
Jack Sleight
2009-02-20 17:09:40
An external style sheet is best, but may be difficult if you're a beginner. The poster seems to be one.
Diodeus
2009-02-20 17:26:19
If you create a file with .css as the extension and then add this line between the HTML <head> tags you'll be just fine.<link href="CSS/MyStyle.css" rel="stylesheet" type="text/css" />
RSolberg
2009-02-20 17:41:54
+6
A:
You can also add padding for a nice effect.
<img src="image.png" style="padding:1px;border:thin solid black;">
Trevor Bramble
2009-02-20 16:59:39
+32
A:
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" />
RSolberg
2009-02-20 17:05:00
A:
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.
RommeDeSerieux
2009-02-20 17:29:19
+6
A:
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 class="hasBorder", 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 class="hasBorder" on all pages will have the same border.
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" />
stevenvh
2009-02-20 20:00:16
You're correct regarding inline styles. I considered how to apply css outside the scope of the question, and used inline styling for brevity.
Trevor Bramble
2009-02-21 23:16:39
+2
A:
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>
Jonathan Sampson
2009-02-20 22:26:53