How do I add a border to an image in HTML?

How can I add a border to an image using HTML?


Here is some HTML and CSS code that would solve your issue:


    border-width: 1px;
    border-color: Black;


<img src="MyImage.gif" class="ImageBorder" />

Two ways:

<img src="..." border="1" />


<img style='border:1px solid #000000' src="..." />

You can also add padding for a nice effect.

<img src="image.png" style="padding:1px;border:thin solid black;">

I also prefer CSS over HTML; HTML is about content, CSS about presentation.

With CSS you have three options.

  1. 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.
  2. 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.
  3. 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" 
<html xmlns="">
<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; }


  <img class="hasBorder" src="peggy.jpg" alt="" />

If you want an external stylesheet, replace the <style>...</style> block with

<link rel="stylesheet" type="text/css" href="somestylesheet.css" />

border="1" ON IMAGE tag or using css border:1px solid #000;


img{border:2px solid black;}


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" class="addBorder" />


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 {
  border:1px solid #000000;

<div class="imageBox">
  <img src="picture.jpg" alt="My Picture" />

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:

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.

Need Your Help

Capybara - Submit a form without button

ruby-on-rails testing rspec bdd capybara

I am trying to submit a form without button using just Capybara and Rspec (no Cucumber or Selenium, I know there is already a question about that).

How to get a cell value in JQGrid?

jquery jqgrid get cell

How to get a cell value in JQGrid?