Tip: Adding borders to elements

Wednesday, October 24, 2007 at 8:40 AM

Posted by Cătălin Avram, Intern (Google Desktop Team)

Empty divs with a background color are a great way to add borders and shadows to GD elements. As an example, consider the edit box, which normally has a white background and no border. Add a colored div that's just slightly larger than the edit box, place it under the edit box, and you have a border.

<div x="10" y="0" width="60" height="19" background="#000000" /> <edit x="11" y="1" width="58" height="17" font="Arial" size="9" />

Still think you can improve the look a bit? You can make a classic shadow by adding a lighter colored div under the border div, with the same size as the border but shifted a bit to the right and down.

<div x="12" y="2" width="60" height="19" background="#676767" /> <div x="10" y="0" width="60" height="19" background="#000000" /> <edit x="11" y="1" width="58" height="17" font="Arial" size="9">

Or stack a few divs for a fancier border:

<div x="10" y="0" width="64" height="24" background="#222222" /> <div x="11" y="1" width="62" height="22" background="#BBBBFF" /> <div x="12" y="2" width="60" height="20" background="#000000" /> <edit x="13" y="3" width="58" height="18" font="Arial" size="9" />

If you name your borders, you can use JavaScript to change them as events happen. For example, to signal that an element has gained or lost focus, you can change its border's color, opacity, or visibility.

The possibilities are truly endless. You can even manipulate the colors of more complex border designs to make an element look embossed, beveled, or extruded, as shown to the right. But don't go too crazy; for a complex design, it probably makes sense to use an img element instead of ten divs.

For more information on using divs, see Tip: Use divs to organize your gadget elements.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com.