Add Borders to Your Lens Photos on Squidoo

NOTE: It appears there is a glitch in loading this page at times. If you don't see examples with photos, refresh your page and see if that helps.

This is the basic code for adding a centered photo to your lens or webpage:

<p align="center"><img src="url of image"/></p>

Buy this and other prints at AllPosters.com

It doesn't take much to add impact to your photo. The example below shows a very thin black line bordering the photo. Note the addition of style="border: 1px solid black to the above code. Style describes things about your image. You will use the style attribute for all of the various borders here. This addition goes before the end tag (/>) for your image. Pay special attention to the quotation marks.

<p align="center"><img src="url of image" style="border: 1px solid black"/></p>

style="border: 1px solid black" specifies size, texture, and color for your border.

Of course, you can still make other changes in the photo when you have borders. In this example, the size of the photo has been changed. Notice the addition of width="300px;".

<p align="center"><img src="url of image" width="300px;" style="border: 1px solid black"/></p>

Your border is not limited to a thin line around the photo. You can change the thickness of the border by changing the number of pixels within the border description. The number of pixels has been changed to 3 in this example.

<p align="center"><img src="url of image" style="border: 3px solid black"/></p>

This border is 20 pixels wide.

<p align="center"><img src="url of image" style="border: 20px solid black"/></p>

How about 80 pixels?

<p align="center"><img src="url of image" style="border: 80px solid black"/></p>

There are lots and lots of colors you can use to make your borders beautiful. There are quite a few word descriptions that you can use, such as black in the examples above. Also try yellow, green, brown, purple, tan, olive, blue, darkblue, orange, red, teal, and aqua. There are others, but these will get your started. In this example, I have changed the color of the border to purple.

<p align="center"><img src="url of image" style="border: 1px solid purple"/></p>

This color is teal.

<p align="center"><img src="url of image" style="border: 4px solid teal"/></p>

Brown

<p align="center"><img src="url of image" style="border: 20px solid brown"/></p>

Whoa! This example has a number where the color should be. Welcome to the world of the hexadecimal color code. Using this code, you have a nearly unlimited number of color possibilities. In the next section, I'll give you some websites that list gazillions of colors along with their hexidecimal codes.

<p align="center"><img src="url of image" style="border: 60px solid #669933"/></p>

There are many websites containing html color codes. Here are a few of them. The best one will be an individual choice, based on what feels most comfortable to you. I strongly recommend bookmarking your favorite of these.

ComputerHope.com HTML Color Codes and Names

HTML-Color-Codes.info HTML Color Code Chart

Immigration-USA.com Complete HTML True Color Chart

December.com Welcome to the Hex Hub (Named Hexadecimal Color Codes for HTML)

WebMonkey.com Color Charts

THESE SITES HAVE INTERESTING COLOR SCHEME GENERATORS

Web Design for Developers HTML Color Combination Chooser

Color Schemer Online v.2

You may want a little room between your photo and its border. Use padding. padding: 5px; is part of the style attribute. Padding goes within the style quotation marks. It's not part of the border description. After the color designation, add a semi-colon(;).

<p align="center"><img src="url of image" style="border: 4px solid #cc3300; padding: 5px;"/></p>

Buy this and other prints at AllPosters.com

Maybe you want just a very small amount of padding for a subtle border.

<p align="center"><img src="url of image" style="border: 1px solid #cc3300; padding: 1 px;"/></p>

You can change the photo's effect dramatically with padding. Here, I'm trying for a snapshot effect.

<p align="center"><img src="url of image" style="border: 1px solid black; padding: 10px;"/></p>

Maybe a different color would look more like a snapshot.

<p align="center"><img src="url of image" style="border: 1px solid tan; padding: 10px;"/></p>

Increasing the padding changes the effect still more.

<p align="center"><img src="url of image" style="border: 1px solid gray; padding: 20px;"/></p>

You can make your photo look like it's framed.

<p align="center"><img src="url of image" style="border: 4px solid #cc3300; padding: 40px;"/></p>

Same padding, but much narrower border.

<p align="center"><img src="url of image" style="border: 1px solid #cc3300; padding: 40px;"/></p>

Really make that photo stand out with wide border and padding.

<p align="center"><img src="url of image" style="border: 20px solid brown; padding: 60px;"/></p>

Buy this and other prints at AllPosters.com

This border effect uses border, padding, and a new property, background-color. It is also in the style attribute, but not part of border or padding. They all work together to achieve the desired effect.

<p align="center"><img src="url of image" style="border: 20px solid olive; padding: 10px; background-color: brown"/></p>

The inner border color is the background color. Determine its size with padding. The outer border color is just your regular border.

Remember, if you want a background color, you have to use padding.

Larger padding with narrower border.

<p align="center"><img src="url of image" style="border: 3px solid black; padding: 30px; background-color: brown"/></p>

Both padding (with background color) and border are wider.

<p align="center"><img src="url of image" style="border: 10px solid black; padding: 50px; background-color: brown"/></p>

Add pizzazz with a border that looks like a 3-dimensional frame. Instead of making the border solid, the new description is groove. Notice the extra bit of color and the difference in two corners of your border.

<p align="center"><img src="url of image" style="border: 8px groove olive;"/></p>

You can use groove with padding and background-color too.

<p align="center"><img src="url of image" style="border: 8px groove olive; padding: 15px;"/></p>

Buy this and other prints at AllPosters.com

<p align="center"><img src="url of image" style="border: 8px groove olive; padding: 15px; background-color: brown"/></p>

Ridge is sort of the opposite of groove. Same effect, but "reversed."

<p align="center"><img src="url of image" style="border: 8px ridge olive; padding: 15px; background-color: brown"/></p>

This effect is called inset. It's the same 3-D idea as the examples above, but it's a little simpler. Notice the border has just one color per side. This first example shows how it looks without padding.

<p align="center"><img src="url of image" style="border: 8px inset olive;"/></p>

In this particular case, inset, by itself, is pretty weak.

But if you add padding and background color, it becomes much more effective.

<p align="center"><img src="url of image" style="border: 8px inset olive; padding: 15px; background-color: brown"/></p>

Outset is the reverse of inset.

<p align="center"><img src="url of image" style="border: 8px outset olive; padding: 15px; background-color: brown"/></p>

You can make a double border by replacing solid with double.

<p align="center"><img src="url of image" style="border: 5px double brown"/></p>

If you add background color, the border looks like this.

<p align="center"><img src="url of image" style="border: 5px double brown; background-color: black"/></p>

You can make your double border any size or color.

<p align="center"><img src="url of image" style="border: 15px double #009933"/></p>

Here is a dotted border. Use dotted in place of solid. You can make the dots any size you want. Once they get much over 5 pixels, dotted borders look more like checkerboard borders, because the dots are square.

<p align="center"><img src="url of image" style="border: 3px dotted black"/></p>

Dashes might be nice. Use dashed.

<p align="center"><img src="url of image" style="border: 3px dashed green"/></p>

Any of these borders can be used with padding and background color.

<p align="center"><img src="url of image" style="border: 6px double black; padding: 30px; background-color: olive"/></p>

Yes, you can make each side of your border different. Rather than using border, you can specify each side separately. Use border-top, border-right, border-bottom, and border-left.

Do you like my creative border?

<p align="center"><img src="url of image" style="border-top: 10px solid red; border-right: 5px dotted yellow;border-bottom: 5px dashed black; border-left: 30px groove green"/></p>

This looks better, don't you think? A better use of this border trick.

<p align="center"><img src="url of image" style="border-top: 20px solid #C9BE62; border-bottom: 40px solid #C9BE62; border-right: 20px solid #C9BE62; border-left: 20px solid #C9BE62"/></p>

Buy this and other prints at AllPosters.com