Home » Squidoo Community » Lensmaking Tips » HTML on a lens

CSS Dotted Line Borders

Ranked #1,393 in Squidoo Community, #132,705 overall

Dotted Line Borders for your Squidoo Lens

Using CSS dotted line borders can really emphasize an image or text.  It can be as simple or complex as you wish to make it.

Contents

  1. 2 Pixel Border
  2. 4 Pixel Border
  3. Dotted Line Box
  4. Emphasize a Word
  5. A Christmas Theme
  6. Green Dotted with Green Background
  7. Red Dotted on Left with White Font
  8. Reader Feedback
  9. Still stuck?

2 Pixel Border

A dotted border line



Use the following code:

<p style="border:2px dotted blue;">A dotted border line</p>

4 Pixel Border

A dotted border line


Notice that I changed the pixels for the border from 2 to 4?
Use the following code:

<p style="border:4px dotted blue;">A dotted border line</p>

Dotted Line Box

Orange dotted lines, black background. Font style is yellow, italic and bold.



Use the following code:

<p style="border: 3pt dotted orange; height: 120px; width: 120px; background-color: black; font-style:italic; font-weight: bolder; color: yellow;"><b>Orange dotted lines, black background. Font style is yellow, italic and bold.</b></p>

Emphasize a Word

Around

some

words for emphasis!

Use the following code:

Around <p style="border:1.5px dotted red; height: 15px; width:35px;">some </p>words for emphasis!

A Christmas Theme

Red dotted lines, green background


As above, I used bold tags to make the words larger, due to the darkness of the green.
Use the following code:

<p style="border:4px dotted red;background-color: #669933;"><b>Red dotted lines, green background</b></p>

Green Dotted with Green Background

Green dotted lines, green background



I used bold tags to make the words larger, due to the darkness of the green.
Use the following code:

<p style="border:3px dotted #336600;background-color: #669933;"><b>Green dotted lines, green background</b></p>

Red Dotted on Left with White Font

Red dotted lines on left, black background. Font style is italic. Font color is white (you can just type color and a colon, then the color).



Use the following code:

<p style="border-left: 4pt dotted red; background-color: black; font-style:italic; color: white;"><b>A bunch of words or an image.</b></p>

Reader Feedback

submit
Show All

Still stuck?

Try the Answer Deck.

Drop by our SquidU.com forum. Ask for help, don't be stingy, be sure to smile, and we're betting someone will come to the rescue.

by

triathlontraining

Squidoo Tools and Resources
CSS Borders for your Squidoo Lens
Solid Line Borders more »

Feeling creative? Create a Lens!

Explore related pages

Related Tags