Click here to Skip to main content
Click here to Skip to main content

Add Image Borders using HTML5/CSS3

By , 10 Jul 2011
Rate this:
Please Sign up or sign in to vote.

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 Smile | :) ). 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[^]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience. He is Win/Web veteran, published 200+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, SQL, .NET, ASP.NET, WPF, C#, Speech Technology and Mobile apps. He's been among recent App submission winners (The Windows 8* & Ultrabook™ App Innovation Contest 2012). Sample pubs:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Edumatter-M12 for Windows, app overview
  5. Engineering Calculator VOLTA-814D
  6. CoolPhone: phone numbers-to-text converter
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects (Finance/Investment, Engineering, Edu) w/total code base exceeding 250k lines; doing consulting in NYC for 20 yrs.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 10 Jul 2011
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid