HTML Borders Backgrounds

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:

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.

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

Solid Borders
Left Borders Only
Solid Backgrounds
Solid Background with Borders
Dashed Borders
Dotted Borders
Double Borders
Inset Borders
Groove Borders
Outset Borders
Ridge Borders
Rounded Border no Background
Rounded Border with Background

Borders around Bullets NEW

Three Images Side by Side

Text Box and Image Side by Side

Text Box and Image Rounded Corners

Border, Background, Text and Images (added 5/5/09)

Image Backgrounds, Hyperlink Buttons, and Logos

Text Boxes as Buttons

HTML Tab Menus (separate lens)

Guestbook

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.

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Left Borders Only - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Solid Backgrounds - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Solid Background with Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Dashed Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Dotted Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Double Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Inset Borders - HTML Examples

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Groove Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Outset Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

Ridge Borders

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

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 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 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 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 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 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 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 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

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 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 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 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 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 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 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 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

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<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.

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.

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:

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 tag with room under the picture for your text. Looks like this:

html borders Time to join the new family. First day home!

html images Such a happy dog.

Um...what mud on my face?

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="188px" height="185px" alt="html borders" />Text for Image #1<img src="URL to Image #2" border="0" float="left" width="189px" height="185px" alt="html images" />Text for Image #2<img src="URL for Image #3" border="0" float="left" width="189px" height="185px" />Text for Image #3

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:

<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /><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

Trouble spot
HTML Examples - Image to the right:

YOUR TEXT HERE<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" />

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

<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" /><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

YOUR TEXT HERE<img src="http://YOUR IMAGE URL HERE" width="270px" height="230px" align="left" style="margin-right: 20px" />

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 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

Image to the right:

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 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

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 examples This 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.)

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!

<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

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.

YOUR STUFF HERE

YOUR STUFF HERE

YOUR STUFF HERE

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

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 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

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:

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:

And italicized:

Visit My Steak Page

Here's the code:

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

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.

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.

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.

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!

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.

Love This Lens?

0

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.

Squidoo

HTML Borders Backgrounds

HTML Examples, Backgrounds and Borders to Copy and Paste

Table of Contents

Solid Borders - HTML Examples

Left Borders Only - HTML Examples

Solid Backgrounds - HTML Examples

Solid Background with Borders

Dashed Borders - HTML Examples

Dotted Borders - HTML Examples

Double Borders - HTML Examples

Inset Borders - HTML Examples

Groove Borders

Outset Borders

Ridge Borders

Rounded Border no Background

Rounded Border with Background

Borders Around Bullet Points

Using UL Styles

Three Images Side by Side

Text Box and Image Side by Side

Text Box and Image Rounded Corners

Border, Background, Text and Images Combined

Image Backgrounds, Hyperlink Buttons, and Logos

Background Images

Images As Borders

Buttons

Logos

Text Boxes as Buttons

A quick and simple way to redirect visitors

Give Credit Where Credit is Due

Thank you, GRSites!

Great HTML Guides on Squidoo

You don't have to go far

Beautiful Backgrounds for Websites

My Squidoo Lessons Learned Lenses

Don't Miss This Resource!

Get your own brand going

More HTML to Copy and Paste

Looking for Help with SEO?

Tips from Lensmasters

HTML Shortcuts for Squidoo Lenses

Make Money with Amazon

Use Your HTML Skills & Squidoo Experience

Squidoo Niche Blaster

Squidoo and Amazon Strategy Step by Step

Let Me Know....

Love This Lens?

Sojourn's Bio

by Sojourn

Explore related pages

Related Tags

Want our Newsletter?