« Links open in new window/tab »

• DOM Reference
• CSS Reference
• CSS Library
• Image Optimizer
• Favicon Generator

« Links open in new window/tab »

• Mississippi Rollergirls Album
• HS Treasures
• Ceece's Articles
• My FreeLancer Profile
• My Google Ad
• My Golden Oldies
• My WebShots Albums
• Helter Skelter
• Inquiring Minds
• My ImageShack
• My Facebook
• Aim Greenland
• PhotoBucket
• Games
• My Slingo
• Videos
• Music
• RSS Feeds
• StumbleUpon - Lots of Fun!
• World Sunlight Map

Double Borders in CSS
PayneLess Designs

Double Dotted, Dashed and Solid Borders:

CSS Used Above: img.image_size { width: 122px; height: 189px; } ul.double_border li { list-style-type: none; display: inline; } img#dotted_borders { border: 3px dotted #700; display: block; } span#dotted { border: 3px dotted #070; padding: 6px; margin-right: 3px; float: left; } img#dashed_borders { border: 3px dashed #700; display: block; } span#dashed { border: 3px dashed #070; padding: 6px; margin-right: 3px; float: left; } img#solid_borders { border: 3px solid #700; display: block; } span#solid { border: 3px solid #070; padding: 6px; float: left; } HTML: <div class="left"><span id="dotted"><img class="image_size" id="dotted_borders" src="image_left.jpg" alt="" /></span></div> <div class="ctr"><span id="dashed"><img class="image_size" id="dashed_borders" src="image_center.jpg" alt="" /></span></div> <div class="right"><span id="solid"><img class="image_size" id="solid_borders" src="image_right.jpg" alt="" /></span></div>

Double Double, Groove and Ridge Borders:

CSS Used Above: img.image_size { width: 122px; height: 189px; } ul.double_border li { list-style-type: none; display: inline; } img#double_borders { border: 3px double #700; display: block; } span#double { border: 3px double #070; padding: 6px; margin-right: 3px; float: left; } img#groove_borders { border: 3px groove #700; display: block; } span#groove { border: 3px groove #070; padding: 6px; margin-right: 3px; float: left; } img#ridge_borders { border: 3px ridge #700; display: block; } span#ridge { border: 3px ridge #070; padding: 6px; float: left; } HTML: <div class="left"><span id="double"><img class="image_size" id="double_borders" src="image_left.jpg" alt="" /></span></div> <div class="ctr"><span id="groove"><img class="image_size" id="groove_borders" src="image_center.jpg" alt="" /></span></div> <div class="right"><span id="ridge"><img class="image_size" id="ridge_borders" src="image_right.jpg" alt="" /></span></div>

Double Inset and Outset Borders:

CSS Used Above: img.image_size { width: 122px; height: 189px; } ul.double_border li { list-style-type: none; display: inline; } img#inset_borders { border: 3px inset #700; display: block; } span#inset { border: 3px inset #070; padding: 6px; margin-right: 3px; float: left; } img#outset_borders { border: 3px outset #700; display: block; } span#outset { border: 3px outset #070; padding: 6px; margin-right: 3px; float: left; } HTML: <div class="left"><span id="inset"><img class="image_size" id="inset_borders" src="image_left.jpg" alt="" /></span></div> <div class="right"><span id="outset"><img class="image_size" id="outset_borders" src="image_right.jpg" alt="" /></span></div>

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.