How to put fancy border around an image in html5? - html

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

HTML
<div class="divimg">
<img src="award.gif">
</div>
CSS
.divimg {
border: 1px solid red; }

Answer 5

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;
}