How do I add a border to an image in HTML

Question

How can I add a border to an image using HTML

User · Answer

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

User · Answer

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

User · Answer

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     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN                  http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Image with border lt  title gt    lt style type  text css  gt    img hasBorder   border 15px solid  66CC33     lt  style gt    lt  head gt    lt body gt     lt img class  hasBorder  src  peggy jpg  alt      gt   lt  body gt   lt  html gt    If you want an external stylesheet  replace the  lt style gt     lt  style gt  block with   lt link rel  stylesheet  type  text css  href  somestylesheet css    gt

User · Answer

border  1  ON IMAGE tag or using css border 1px solid  000

User · Answer

Two ways    lt img src       border  1    gt    or   lt img style  border 1px solid  000000  src         gt

User · Answer

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

User · Answer

CSS  img border 2px solid black

User · Answer

Here is some HTML and CSS code that would solve your issue   CSS   ImageBorder       border-width  1px      border-color  Black      HTML   lt img src  MyImage gif  class  ImageBorder    gt

User · Answer

You can also add padding for a nice effect    lt img src  image png  style  padding 1px border thin solid black   gt

User · Answer

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      lt img src  mypicture jpg  alt  My Picture  class  addBorder    gt    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      lt div class  imageBox  gt     lt img src  picture jpg  alt  My Picture    gt   lt  div gt

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

Examples related to html

Examples related to css