Beveled Images Using Cascading Style Sheets

Web developer James Edwards recently wrote a blog about creating beveled images using Cascading Style Sheets (CSS). He came up with four techniques that will allow you to do just that, and shows you the pros and cons of each method.

Edwards’ first technique involves using generated content on the image itself. This “ultra-clean” technique requires no additional markup, but alas, it only works in Opera.

The second technique Edwards presents is to use generated content on a wrapper element. This works with a wider range of web browsers, but requires additional markup and explicit dimensions.

His forth technique is to use shadows instead of borders. This is the most visually appealing technique, but, again, it only works in one browser–this time Firefox 3.5 or later.

The last technique works for all browsers, but requires more additional markup and explicit dimensions. Edwards details the methodology behind his techniques, and explains how to take it further by using colorful borders for a “gel-like” effect.