HTML-Kit Plugin: Add a CSS Border

January 14, 2009 – 9:23 am

What Is It?

htmlkit

This HTML-Kit plugin will add the code for a colorful border to your CSS code. This is useful in testing to show a border, for example, around a div with a certain class or ID, around all p tags, or more. This plugin was created for use in Click to visit this external linkHTML-Kit 292 (not “Tools”).

Options include:

Solid red (border:solid 1px RED;) – default action
Solid blue (border:solid 1px BLUE;)
Solid lime (border:solid 1px LIME;)
Solid yellow (border:solid 1px YELLOW;)
Solid orange (border:solid 1px ORANGE;)
Dotted red (border:dotted 1px RED;)
Dotted blue (border:dotted 1px BLUE;)
Dotted lime (border:dotted 1px LIME;)
Dotted yellow (border:dotted 1px YELLOW;)
Dotted orange (border:dotted 1px ORANGE;)

Caveats and FAQs

Why use this?: There are bookmarklets (and other goodies) available that will add a border to elements of a page at the click of a button. There are also excellent tools like the Click to visit this external linkWeb Developer plugin for Firefox with a myriad of useful options for developement. This HTML-Kit plugin is for use within the HTML-Kit software. Also, it will apply a border specifically and only to the element(s) you choose, whether it be a p tag, all h2 tags, a single pre section, text within cite, all strong text, or other.
There are no options for “dashed” borders.: I failed to add them as I rarely use “dashed” — an oversight on my part. Need “dashed” borders added? Just drop me a line and I’ll add them.
Why are the colors in UPPERCASE text?: Most people write colors in CSS in RGB triplet form (255, 0, 255) or hexadecimal form (#F1F1F1). Writing colors in uppercased plain text makes them stand out more and, hopefully, will allow you to see them more easily when you’re ready to erase them from your code.