Add Image Borders using HTML5/CSS3

Introduction

HTML5 is eventually here (well, at least de facto), so it's about time to start the in-depth discussion of Web 5.0 and its impact on the modern Internet world as we know it. One of the most notable parts of this emerging standard is a plethora of graphic enhancement features [1-4], achievable via pure CSS3 without any use of auxiliary "decorative" image files as it was done before. Following samples demonstrate selected best practices of decorating (i.e. framing) the HTML5 image element (img) by adding various borders: double borders, single rounded borders, borders with inset shadows and color gradients.

DEMO

HTML5 Best Practices: Image Borders[^]
 
As we are discussing the aesthetic enhancement to the online images, then the actual Demo application would be quintessential; as it was said, a picture is worth a thousand words (btw, it also has dramatically higher digital footprint :)). You can find the sample implementation of suggested technique at: http://webinfocentral.com/html5/ImageBorders.aspx[^]

Code samples: HTML5/CSS3

Listing 1 (CSS3). Double-Borders added to HTML5 img element

img.imgDoubleBorderLightGray { border: 5px solid #dadada; padding:5px;}
img.imgDoubleBorderGreen { border: 5px solid DarkGreen; padding:5px; } 

Listing 2 (CSS3). Borders with Inset Shadows added to HTML5 img element

img.imgInsetShadowGray { padding:10px; -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; } 

Listing 3 (CSS3). Rounded Borders added to HTML5 img element

img.imgRounded {padding:10px; background-color: DarkGreen; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;} 

Usage

Usage is rather intuitive and straightforward:
1. Add CSS3 snippets to the style section of the page
2. In page HTML body specify the class to be applied to the img tag, like: class="imgDoubleBorderGreen". And voilà, that's it!

Browser compatibility

• Mozilla FireFox 5.0+
• Google Chrome 12.0+
• Apple Safari 5.0+
• Microsoft IE 9.0+ (partial compatibility)

References

1. HTML5 Best Practices: Image Borders[^]
2. HTML 5 elements aesthetic enhancement via CSS3: buttons, input boxes[^]
3. Scientific Calculator ZENO-5000[^]
Pure HTML 5 / CSS 3 Modal Dialog Box; no JavaScript[^]