Yes, it's true. SnibWorks.com is the first to bring you a full 1-pixel dotted border— for any browser, even IE. See it around this text?

Thanks to this new breakthrough, you too can have dotted borders all the way around almost any HTML element.

Impossible, you say? Is this the closest you can get? Not anymore. Read on to learn how to get this working on your site.

To use this new discovery on your PHP pages, here's a very easy way to include the dotted_border_* functions:

Include this PHP code at the top of your page: <?php
include 'http://www.snibworks.com/source/dottedBorders.php';
?>

Then, whenever you want to put dotted borders around something, use code like this: <?php
echo dotted_border_box("text here","the CSS style of the box","the CSS style of the content");
?>

Alternately: <?php
echo dotted_border_open("the CSS style of the box","the CSS style of the content");
?>
text here
<?php
echo dotted_border_close();
?>

The second parameter for styling the block is optional and defaults to blank. The third parameter for the CSS style of the content is also optional.


But what if you're not using PHP? Fortunately for you, there's a JavaScript version as well.

Include this in the head area of your page: <script type='text/javascript' src='http://www.snibworks.com/source/dottedBorders.js'></script>

This gives access to the dotted_border_* JavaScript functions, which function almost exactly the same as the PHP versions.
<script type='text/javascript' src='http://www.snibworks.com/source/dottedBorders.js'></script>
...
<script type='text/javascript'>
document.write(dotted_border_open("CSS of the block","CSS of the content"));
</script>
text here
<script type='text/javascript'>
document.write(dotted_border_close());
</script>


How this new discovery works can be explained with this simple image.

Dotted borders explained

If the dotted borders do not work in , comment here. Also comment if you'd like to share any other problems, or just want to let me know how this works for you.

On December 27, 2005, Philip Rothschild says:
Most of the post here are by pedantic little whinging idiots and I would hire you for minimum wage. You bore the crap out of people and give web development a bad name. Especially Drew and dud3. Twats! :)
On December 16, 2005, James says:
K, nice fix.
On December 4, 2005, drew says:
you're a ****ing idiot. this is no breakthrough.
On September 6, 2005, db says:
l33t
On July 30, 2005, says:

On July 30, 2005, says:
your php code aint that breakthrough either :D
On July 30, 2005, dud3 says:
lol lets put this out on CNN: "snib first to discover table backgrounds since 1994"
On July 30, 2005, urb4n says:
breakthrough my ass
On July 19, 2005, Hayato says:
This is not a breakthough, this is an old trick..
On July 4, 2005, samer says:
i prefer to accept the limitations instead of coming back to the use of tables, I used CSS to avoid them in the first place. =/
On June 13, 2005, wow says:
This was pretty amazing... in 1997, when I first started making web sites. *yawn*
On June 5, 2005, amygdela says:
Yugh, tables... Great hack though!
On June 3, 2005, P2 says:
Interesting stuff - I gave up trying to get IE to show dotted boders and just accepted its limitations. I guess in principle the background-image thing works, so why not use it. I don't quite see why its necessary to involve PHP or Javascript - why not just CSS (/CSS hacks)?

Its a lot of trouble though for something so simple - I don't know how often I would bother... Hope IE7 fixes that, and all the other oddball things IE6 does.

By the way I notice your PHP is escaping commas etc. in your messages. You can unescape the input text by adding $message = stripslashes($message); to your script (where $message is the variable that interprets the form text).

http://www.paul-parker.com
On June 1, 2005, RichardM says:
Its always amazing to me how ignorant the people who I considered to be among the more intelligent people often are. People who despise tables, "html bloat", etc must either be people who don't have clients to deal with, or are the pushy people who make clients come to me when they are tired of hearing excuses and want to get stuff done. Kudos to snibworks for a solution that, while isn't new for those of us who regularly use images for borders, is still a solution for those that need it. Css is great, I use it for most of my work, but before denouncing people's hard work, why not provide an alternative solution (that doesn't involve even more lengthy/complicated hacks in css)
On May 18, 2005, Aikon says:
Boooourns, man = \
On May 11, 2005, Mr K says:
Bah ... this is not a solution at all. The idea of using CSS is to help remove HTML BLOAT ... this adds too it by creating unnessecary tables. You should be removing the tables (unless showing tabluar data). Not to mention your font tags and ..... *shudder*
On April 14, 2005, dr0n3 says:
This is no breakthrough. You're not the first person to use images for borders. Also, I really think you should read http://adactio.com/articles/display.php/CSS_based_design
Write your own comment
Your name:
Comment: