HTML Borders Backgrounds

Ranked #18 in Squidoo Community, #1,861 overall

HTML Examples, Backgrounds and Borders to Copy and Paste

Have you seen sharp looking lenses formatted with HTML borders and backgrounds and wished you could do the same? There are already plenty of EXCELLENT how-to-HTML lenses available, so I thought I'd do something a little different.

There are two main topics in this lens: squidoo niche blaster

First half of this lens - tons of html examples that can easily be copied and pasted into your own lens to create borders, background colors, boxes, and image borders. If you need formatting in a hurry or have little HTML experience, this may be a helpful tool for you. Scroll through the html examples of simple borders, backgrounds, and combinations. If you see something you like, copy the html code and paste it into your own lens. Insert your own content where each code says YOUR STUFF HERE.

Second half of this lens will show you how to easily add color and pattern to your lens, add buttons to drive visitor behavior, and create your own personal logo. I've found a free site that provides thousands of backgrounds and a generator module that lets you customize all kinds of things like buttons, tabs and logos. Store all your creations in your personal folder on the website and link directly to the site (free hosting!). Pick your favorites, enhance them with any of the customization modules, and save the image in your personal folder. In your folder, you'll find the HTML code needed to insert your designs. Check it out - GRSites.

If you don't want to scroll through the first section and want to get right into the slightly more advanced section, click on the COLOR button below.


html border background color


create counter

Have you seen my Squidoo strategy guide? Check out Squidoo Niche Blaster!

Solid Borders - HTML Examples




Following are html examples of borders in colors that match Squidoo's theme. You can modify these html examples on your own by changing the six digit color codes (a combination of numbers and/or letters) for the border and the font. (Too much of the same thing can get BORING! I'd rather write about a hand blender!) Refer to an HTML color chart for other color codes. Two html examples of each border are presented, one with plain font and one italicized.



<p style="border: solid 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Left Borders Only - HTML Examples




<p style="border-left: solid 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border-left: solid 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border-left: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border-left: solid 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border-left: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border-left: solid 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border-left: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border-left: solid 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Solid Backgrounds - HTML Examples




<p style="background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Solid Background with Borders




<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Dashed Borders - HTML Examples




<p style="border: dashed 5px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dashed 5px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dashed 5px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dashed 5px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dashed 5px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dashed 5px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dashed 5px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dashed 5px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Dotted Borders - HTML Examples




<p style="border: dotted 3px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dotted 3px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dotted 3px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dotted 3px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dotted 3px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dotted 3px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: dotted 3px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: dotted 3px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Double Borders - HTML Examples




<p style="border: double 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: double 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: double 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: double 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: double 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: double 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: double 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: double 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Inset Borders - HTML Examples




<p style="border: inset 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: inset 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: inset 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: inset 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: inset 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: inset 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: inset 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: inset 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Groove Borders




<p style="border: groove 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: groove 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: groove 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: groove 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: groove 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: groove 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: groove 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: groove 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Outset Borders




<p style="border: outset 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: outset 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: outset 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: outset 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: outset 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: outset 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: outset 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: outset 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Ridge Borders




<p style="border: ridge 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: ridge 10px #ddddff; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: ridge 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: ridge 10px #99aabb; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: ridge 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: ridge 10px #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: ridge 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: ridge 10px #ffaa00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Rounded Border no Background




Rounded corners will not work in Internet Explorer browsers but this code will work in most others.



<p style="border: solid 10px #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Rounded Border with Background




Rounded corners will not work in Internet Explorer browsers but this code will work in most others.



<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; background: #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>



<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



<p style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"><i>YOUR STUFF HERE</i></p>

Borders Around Bullet Points

Using UL Styles




Makingamark asked a very good question. How do you but a border around a list of bullet points? Answer: Use UL style tags around the ordered or unordered list like this:

  • The code looks like this: <ul style="background: #ffff33; padding-left: 50px; padding-right: 50px; padding-top: 10px; padding-bottom: 10px; text-align: justify; line-height: 23px; color: #003366; font-size: 18px; border: solid 10px #3300cc"><li>First bullet</li>
    <li>Second bullet</li>
    <li>Third bullet</li></ul>

  • Change any of the border properties inside the UL style just as you would inside a paragraph style

  • Combine ul types (squares, images) with the ul style formatting to change the shape of your bullet point

Won't take long until you discover that if you try to combine a border around your paragraph text and a border around your bullet points that the two codes don't act together and you end up with something like this:

This is my example text. Nothing of importance is mentioned here. I just want you to see what happens when you're typing along in paragraphs and then try to format a list of bullet points to go with those paragraphs but the borders won't play nicely together. Instead you get:

  • One border around the paragraph above the bullet points

  • a separate border around the bullet point list

  • yet another border around the paragraph following your list

  • all these extra border lines right in the middle of our flowing text!

We want to fix that, right? Sometimes you want the list to just flow inside the already formatted, bordered paragraph text.


Paragraph styling (<p="...">) and ordered or unordered list styling (<ol="...> and <ul="...">) each act as the start of a new set of code. When you put them together in a Squidoo text module, they have equal HTML power and they cause a sort of stale-mate.

To get around this, we pull of a little HTML illusion by removing the bottom border of paragraph text above our list, removing the top and bottom borders around our list itself, and removing the top border from paragraph text below our list. Like this:

This is my example text all cleaned up so that the paragraphs and bullet points all have one common border. Now we have:

  • A uniform border around everything

  • Tight code (no line breaks between sections) to keep our border free of any breaks

  • A seamless appearance

  • A way to keep our visitor from being distracted by changing backgrounds

We just needed to use border-right, border-left, border-top, and border-bottom properties as needed.


The code for the above looks like this:

<p style="border-left: solid 10px #3300cc; border-top: solid 10px #3300cc; border-right: solid 10px #3300cc; background:#ffff33; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #003366; font-size: 18px">First paragraphs before our list</p><ul style="background: #ffff33; padding-left: 50px; padding-right: 50px; padding-top: 10px; padding-bottom: 10px; text-align: justify; line-height: 23px; color: #003366; font-size: 18px; border-left: solid 10px #3300cc; border-right: solid 10px #3300cc"><li>First bullet point</li>
<li>Second bullet point</li>
<li>Third bullet point</li>
<li>Fourth bullet point</li></ul><p style="border-left: solid 10px #3300cc; border-bottom: solid 10px #3300cc; border-right: solid 10px #3300cc; background:#ffff33; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #003366; font-size: 18px">Following paragraphs.</p>

Three Images Side by Side



I often put affiliate picture links side by side so I can get more items in a smaller space. I used this format a lot on my Modern Throw Pillows lens. To do this, you have to tell the module to put your images right next to each other by using the HTML "float" attribute. By telling each image to "float: left" they line up next to each other. Here are three images side by side.

html bordershtml images

To put them all together, you can insert "float: left" within the "img src" tag. The HTML code for three images of this size sitting side by side is:

<img src="URL to image #1" border="0" float="left" width="195px" height="185px" /><img src="URL to image #2" border="0" float="left" width="195px" height="185px" /><img src="URL to image #3" border="0" float="left" width="195px" height="185px" />

Copy and paste this code. Your images need to be hosted somewhere else (like Photobucket). Include the URL link to each of your three images where noted. When you copy and paste the code, it might put spaces in your code that don't belong there. Delete the unnecessary blank spaces. If you have put a border around your module in which the images reside, it might be adding too much width to keep these images together. If that's the case and an image rolls to the next row, change the image width of one or more of the images by a few pixels in the code (where it says "width=#px") until they all fit.



But what if you want to put a link, caption, or text under each picture? Your going to make each image a separate box with it's own <p> tag with room under the picture for your text. Looks like this:

html bordersTime to join the new family. First day home!

html imagesSuch a happy dog.

Um...what mud on my face?

The HTML code for three images of this size sitting side by side is:

<p style="width: 188px; height: 250px; float: left; line-height: 23px; color: #003366; font-size: 18px; text-align: center; background: #ffff33; border-left: solid 10px #3300cc"><img src="URL to Image #1" border="0" float="left" width="188px" height="185px" alt="html borders" />Text for Image #1</p><p style="width: 189px; height: 250px; float: left; line-height: 23px; color: #003366; font-size: 18px; text-align: center; background: #ffff33"><img src="URL to Image #2" border="0" float="left" width="189px" height="185px" alt="html images" />Text for Image #2</p><p style="width: 189px; height: 250px; float: left; line-height: 23px; color: #003366; font-size: 18px; text-align: center; background: #ffff33"><img src="URL for Image #3" border="0" float="left" width="189px" height="185px" />Text for Image #3</p>

Text Box and Image Side by Side




html backgrounds

Putting a bordered text box alongside a bordered image looks pretty sharp but gets a little tricky.


Read the directions below and then see the html code in the examples that follow.



If your image and text fit the exact dimensions of the boxes I have here, you'll be able to copy and paste the html example code, plug in the link to your own image and enter your own text for the text box. Images within text modules must be hosted somewhere else. I use Photobucket, which is free and provides you a direct link (url address) to each of your photos.

However, if you need a larger image, or more text space, you will have to "fiddle" with the dimensions (width and height) in the html examples code. Putting images alongside text where everything lines up this nicely looks great. Images or text boxes that don't match up can look sloppy.

The HTML code is basically telling the text module how much space to allocate for each box. While you have a lot of height available to you in your text modules, you have only so much width. The code examples that follow are set for the width of Squidoo text modules. If you try to make one box wider without decreasing the width of the other box by the same amount, one box will try to wrap to the next paragraph and you'll have a broken box....not good.

However, leaving the text box big enough for text and adding another image to the bottom of that text can cause the pic to do something cool at the bottom of the box. See the intro module for my Contemporary Furnishings lens for an example.

I've highlighted the width/height combinations in the html code so you can see where they are. The highlighting will not copy into your own module. There are two width/height combinations for the image box - one for the box around the image and one for the image itself. I've made these the same size. The HTML border and padding settings will provide some definition between the box and the image anyway. The third width/height combination is for the text box. I've made it thinner than the image box so that you have more room for your picture. Notice I've made all the heights the same so the tops and bottoms of both boxes start and end in the same place for clean lines. You can play with the font size, border color, and background color for each box separately or keep them the same for a more visually clean appearance.

HTML Examples - Image to the left:



<p style="float: left; border: solid 10px #99aabb; padding: 15px; font-size: 12px; width: 270px; height: 230px; margin-right: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /></p><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px;">YOUR TEXT HERE</p>


Trouble spot
HTML Examples - Image to the right:


<p style="float: left; border: solid 10px #99aabb; background: #ddddff; padding: 15px; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px"> YOUR TEXT HERE</p><p style="float: right; border: solid 10px #99aabb; padding: 15px; font-size: 12px; width: 270px; height: 230px; margin-left: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /></p>



Hold on tight....two rows of boxes staggered left/right:

<p style="float: left; border: solid 10px #99aabb; padding: 15px; font-size: 12px; width: 270px; height: 230px; margin-right: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /></p><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px;">YOUR TEXT HERE</p>


<p style="float: left; border: solid 10px #99aabb; background: #ddddff; padding: 15px; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 230px; margin-bottom: 10px"> YOUR TEXT HERE</p><p style="float: right; border: solid 10px #99aabb; padding: 15px; font-size: 12px; width: 270px; height: 230px; margin-left: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /></p>

Text Box and Image Rounded Corners



See instructions in the above module if you need help.


Image to the left:


<p style="float: left; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-right: 10px; margin-bottom: 10px"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /></p><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px;">YOUR TEXT HERE</p>



Image to the right:

<p style="float: left; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px"> YOUR TEXT HERE</p><p style="float: right; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-left: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /></p>



And stacked:

html borders

<p style="float: left; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-right: 10px; margin-bottom: 10px"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /></p><p style="float: right; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: justify; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px;">YOUR TEXT HERE</p>


<p style="float: left; border: solid 10px #99aabb; background: #ddddff; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; line-height: 15px; color: #191970; font-size: 12px; width: 210px; height: 320px; margin-bottom: 10px"> YOUR TEXT HERE</p><p style="float: right; border: solid 10px #99aabb; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 12px; width: 270px; height: 320px; margin-left: 10px; margin-bottom: 10px;"><img src="http://YOUR IMAGE URL HERE" width="270px" height="320px" align="left" style="margin-right: 20px" /></p>

Border, Background, Text and Images Combined



I had a special request to include the code I use to wrap text around images. Images come in really handy when creating a lens. Let's say you have a long text module that you don't really want to break up into smaller pieces with different headings. Long lines of text get to be too much for web browsing but if you break that up with images, reading the text becomes more appealing. In the following, I've combined a border, a background, images, and text that wraps around images. The code follows the example.



html examplesThis is my Goldendoodle, Apollo, after he discovered the sprinkler system was overflowing near a hole in the side yard. Huh...I wonder how that happened? Now, he's at the patio door thinking he can come in. Guess again, Apollo. (Guess who got a bath after this? Yup. Both of us.)

html examples
We can continue to add more images and text wrapping around those images by just adding them anywhere, even in the middle of our sentences. We can also float the images either to the left or the right.

Here's Apollo again. All clean!



<p style="border: solid 10px #3300cc; background:#ffff33; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px"><img src="URL TO YOUR 1ST IMAGE" style="float:left; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; width: 200px; height: 200px" />YOUR TEXT HERE

<img src="URL TO YOUR 2ND IMAGE" style="float: right; padding: 15px; width: 200px; height: 200px" />
YOUR TEXT HERE</p>



If you want to do just one image, copy just the first paragraph of code. If you want to do two images, as in my example, copy both paragraphs of code. Insert your own image links where noted and insert your text where noted.

My text in the example was written so that I had enough text to fill the side of each photo. Your code may act differently if your text is shorter or longer than the height of the photo. You can increase the border size by changing the digits where it says "border: solid 10px...". You can also change the border color by changing the six digit color code assigned to the border, change the font-size where it says "font-size: 18px" and change the line height where it says "line-height: 23px".

I've also fixed these images at 200px by 200px. You can change the width and height of each to a size that fits your image. The width of a text module is 600px.

Image Backgrounds, Hyperlink Buttons, and Logos




Give your topic a boost with a coordinated HTML background, border, or button. GRSites makes it very easy. Register for a free account, find a background image that matches your lens theme and start playing around.

Some tips for using GRSites:

It took me a bit to figure out how to stick an image in my personal folder. After you've created the image on the site, scroll to the bottom of the page and click on SEND IT next to the yellow folder icon or where it says to Put This Texture in Your GRSites Folder. You'll then be given the option to go to your folder.

Every now and then, an ad will pop up. It does not happen often enough to be annoying and you have the option to Skip This Ad. Since you're getting all this stuff for free, it's hard to care about the ad.

Be careful about what you delete from your folder. Remember, the code you enter into your lens is linking directly to your folder to present the image. If you delete it, you'll find a blank spot on your lens.

Keep scrolling for more examples.

Background Images

These backgrounds were created using GRSites. Maybe they're a little wild, but you get the idea - anything is possible.

Because these were created with my own account, copying and pasting is not as easy as with the simple HTML colors above. You will need to copy this code, put it in your module, and replace TWO items:

  • Copy your image's URL link shown in your folder (just the link, not all of the HTML code provided by GRSites) into the code below where it says http://YOUR IMAGE URL HERE


  • Insert your own text/content where it says YOUR STUFF HERE


  • This will provide you the pre-formatted border, margin, and text from my code. If you want to format your own, then simply copy and paste the code provided by GRSites into your module.



    <p style="border: solid 10px #99aabb; background-image: url(http://YOUR IMAGE URL HERE); padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



    <p style="border: solid 10px #99aabb; background-image: url(http://YOUR IMAGE URL HERE); padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>



    <p style="border: solid 10px #660000; background-image: url(http://YOUR IMAGE URL HERE); padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">YOUR STUFF HERE</p>



    <p style="border: solid 10px #660000; background-image: url(http://YOUR IMAGE URL HERE); padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">YOUR STUFF HERE</p>



    One of my favorites! Yes, that's water and yes it's moving. With rounded corners on the border, no less...You probably wouldn't want to do a whole lot of this one - I'm not sure what the load time might be like - but it sure does catch your attention.



    <p style="border: solid 10px #87CEEB; padding: 15px; background-image: url(http://YOUR IMAGE URL HERE); 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: #191970; font-size: 18px">YOUR STUFF HERE</p>

    Images As Borders

    A little background goes a long way. How about just some pattern running down the side of your text? Go to GRSites and click on Background Textures in the top menu. Find a texture/pattern you like. After you click on the background, you'll find a two-column list of things you can do with that texture. On the bottom-left you should see an option to "Make Customized Borders". Walk through the step-by-step options, selecting the thickest border setting and a background of white. Save the custom border to your personal folder. While it appears to be a border, it's really a full image. Using the code below will indent your text enough to not print on the side border itself. I've used the thickest border (100px) available. Again, insert your image's URL in the code, insert your own text and VOILA!



    <p style=" border: solid 10px #ddddff; background-image:url(http://YOUR IMAGE URL HERE); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR STUFF HERE</p>



    <p style="border: solid 10px #556b2f; background-image:url(http://YOUR IMAGE URL HERE); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR STUFF HERE</p>



    <p style="border: solid 10px #556b2f; background-image:url(http://YOUR IMAGE URL HERE); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR STUFF HERE</p>

    Buttons

    Buttons can help you guide your visitor to one of your other lenses, your storefront, or your profile.

    Use the GRSites button maker to create your own. Free accounts are allowed only a small amount of text on the button so keep it short or pony up. Design your button, enter your text, and enter your link's URL. Copy and paste the entire code provided right into your module.

    Your code will look something like this:



    <a href="http://www.squidoo.com/votemacro"><img border="0" width="150" height="60" src="http://static1.grsites.com/user/folders/username/r4213437/button98321720.png"/></a>



    If the button is too small, play with the "width" and "height" values in your module to change the size.

    Beware! All of these buttons are linked to my other lenses so click at your own risk. (Sneaky of me, no?)



















    For my personal blog, visit:

    Logos

    Use the logo maker to come up with your own logo, like for Britax Roundabout reviews. Build your own brand name by putting it on all of your lenses. Easy as copying and pasting the HTML code from your personal folder into your lens.











    Text Boxes as Buttons

    A quick and simple way to redirect visitors





    Use a text box to make your own button. This is one of the fastest, easiest methods of using HTML in the background to make a button because you don't have to import any images. You can use buttons to send visitors to your own website, blog, another lens, or to a resource page. I have a lens that I kept expanding until I eventually had to split the topic into three different lenses. To encourage visitors to see my new lenses, I replaced where those sections had been on the original lens with buttons like these.



    Balloon Decoration Ideas



    Here's the code:



    <p style="border: outset 10px #005588; padding: 15px; margin-left: 100px; margin-right: 100px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;text-align: center; line-height: 23px; color: #191970; font-size: 25px; font-family: georgia"><a href="http://YOUR URL HERE"><b>YOUR TEXT HERE</b></a></p>



    And italicized:



    Visit My Steak Page



    Here's the code:



    <p style="border: outset 10px #005588; padding: 15px; margin-left: 100px; margin-right: 100px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;text-align: center; line-height: 23px; color: #191970; font-size: 25px; font-family: georgia"><a href="http://YOUR URL HERE"><b><i>YOUR TEXT HERE</i></b></a></p>

    Give Credit Where Credit is Due

    Thank you, GRSites!

    If you use something from GRSites, you need to give them proper credit. Note somewhere on your lens that you used them for backgrounds, buttons or images and include a link to their site.

    Most of this site was made possible because of them and I make no money from referring you to them. I just wanted to share a handy resource.

    Great HTML Guides on Squidoo

    You don't have to go far

    Loading

    Beautiful Backgrounds for Websites

    I was so excited when I came across this lens on Squidoo featuring one of the largest resource lists for free website backgrounds. Some feature incredible artwork as backgrounds or unique patterns designed by graphic artists. You could get lost in these examples for hours! Great fun.

    Loading

    My Squidoo Lessons Learned Lenses

    I've been working online for over two years - enough so that I started my own network of sites and left my full time job. I remember how intimidating all of this was when I first started. I journaled my first few months on Squidoo and assembled some tips to help others. You can read these journals in the lenses below.

    Loading

    Don't Miss This Resource!

    Get your own brand going

    Struggle to find the right image or logo for your lens? Started a niche and you'd like to use the same sort of image or branding on each lens in the niche? Or maybe you started a group and want badges and icons created that you can award to group members or contest winners. Squidoo members can have these created for FREE by our own fellow lensmaster, Janusz! Doesn't matter if you've been on Squidoo for years or just a few days. Here's the lens that displays his incredible work and tells you how to request your own images and logos.

    Loading

    More HTML to Copy and Paste

    As a member of team WiWon Wonder Squids, I created two lesson lenses on HTML. One lens covers HTML for Squidoo themes and the other provides HTML for Squidoo Co-Branded lenses.

    AND - if you ever do recipes on your lenses, DO NOT MISS Macs lens on creating a recipe card format for your lenses using HTML tables. She gives you the HTML code to copy and paste - it's amazing!

    She's done it again with a great set of step by step instructions for using GRSites to make those neat borders!

    Loading

    Looking for Help with SEO?

    Tips from Lensmasters

    Need help with SEO? Fellow lensmaster, JeffWend, blogs about SEO on his self-titled blog, Jeff Wendland, and offers his professional services to businesses and website owners who need help with their SEO strategies.

    One post with SEO tips from Squidoo lensmasters is a helpful summary of the easiest and most effective things you can do to boost your rankings in the search engines. Visit the post at: SEO Tips from Squidoo Lensmasters.

    By the way, Jeff has a mind-boggling 550 lenses of his own. Want to learn how to become a success on Squidoo? Study the lenses of those who have paved the way - like Jeff.

    HTML Shortcuts for Squidoo Lenses

    Here's a slick trick - Prolific and master lensmaster, Jeffryv, found a tool you can download for free to your browser toolbar that formats text with HTML code at the push of a button. This is a great way to make lenses more quickly and still have them look good! You can read all about the tool and how to use it on his lens: HTML Text Formatting.

    Make Money with Amazon

    Use Your HTML Skills & Squidoo Experience

    Squidoo Niche Blaster

    Squidoo and Amazon Strategy Step by Step

    I've been very fortunate to have achieved a great level of success with Squidoo. I love the site, the ability to use HTML to make my lenses unique, and the great built in search-engine optimization that Squidoo continues to enhance and improve.

    I want others to be able to have the same success so I outlined my step by step strategy in an ebook called Squidoo Niche Blaster. The exact method I use to find niches, make lenses, and promote Amazon is outlined in easy to understand instructions that include short video tutorials and the same sort of copy-and-paste HTML that you've found on this page. It doesn't get any easier than this!

    Read the outstanding reviews from other internet marketers and your fellow lensmasters and then decide if it's just what you need to boost your online earnings.

    Let Me Know....




    Think you'd use any of these HTML borders and backgrounds information on your own lens? Leave any comments, ideas, or requests for additional information right here!

    Don't miss GrowWear's lens on a a free Color Schemes tool that helps you pick the best complementary colors for your lenses!

    Also, I tried something new, a study of my start on Squidoo and some basic tips I learned along the way.

    submit

    Love This Lens?

    If you would like to rate this lens, then you can do so here (Squidoo members only)

    This module only appears with actual data when viewed on a live lens. The favorite and lensroll options will appear on a live lens if the viewer is a member of Squidoo and logged in.

    Add this to your lens »

    Sojourn's Bio

    I'm a wife and working mother with three growing boys at home. I escape to Squidoo and my personal blog, Desert Pond, because it's rough being the only female in the house - although I wouldn't have it any other way.

    Loading

    by

    Sojourn

    Me? I'm just a busy mom with a hectic, full-time job who often procrastinates on her other home responsibilities by spending countless hours on the web... more »

    Feeling creative? Create a Lens!