1

I am making an html page in which I have put some pictures. Now I want to put some fancy borders around it. How do I do that? My code is:

<img src="award.gif">

When I run it, it comes out perfectly. But I need a border. I use the latest version of Google Chrome. Thanks.

trincot
  • 317,000
  • 35
  • 244
  • 286
Box Box Box Box
  • 5,094
  • 10
  • 49
  • 67

5 Answers5

4

You can use CSS rules to set border around the image, see the below link where you can see different CSS borders and you can generate cross-browser border CSS. I like this tool very much and this tool provides an intuitive preview to see how the border will look like-

http://www.cssmatic.com/border-radius

Manik Arora
  • 4,702
  • 1
  • 25
  • 48
1

Like this,

css:

img { 
   border:1px solid #021a40;
}

The "Double Border":

img {
   padding:1px;
   border:1px solid #021a40;
}

For multiple images, you can class in each images, and css is here,

Simple Example

Another one Example

And for more about border and border-radius refer this Link

UPDATE:

FIDDLE

pcs
  • 1,864
  • 4
  • 25
  • 49
0

You can do this by using a instead because in matters of CSS this can be more versatile.

CSS

myImage { 
    background:url(path to image file goes here);
    border: 1px solid #000000; //black border
    //some width and height values
}

HTML

<div class="myImage"></div>
Zhephard
  • 360
  • 1
  • 13
  • I am trying to figure what he meant by fancy – Zhephard Apr 24 '15 at 05:21
  • I meant something good looking, attractive, etc. Basically something which improves the quality of the page – Box Box Box Box Apr 24 '15 at 06:09
  • In that case its not about the property, its about the design. Remember that a website is going to look fancy not because the use of css properties, but an adequate management of your design. Sometimes even not using border radius but shadowing properties makes attractive sites, but as im saying, it all depends on the concept and your needs. – Zhephard Apr 24 '15 at 17:06
0

HTML

<div class="divimg">
<img src="award.gif">
</div>

CSS

.divimg {
 border: 1px solid red; }
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
  • @JitendraPancholi thanks for letting me know that he need fancy edge borders then user identicon check this link which I have answered for geting fancy jagged edges, hope this is fancy http://stackoverflow.com/questions/18972888/make-a-divs-top-and-bottom-border-have-a-jagged-edge – Arun Bertil Apr 24 '15 at 05:25
0

There are many ways of doing that, you can create a div and put the image inside the div and then, with css, create the border. Another simple way is this:

img {
  border-style:solid;
  border-width:1px;
  border-color:red;
  }
FRP7
  • 89
  • 2
  • 11