Borders for Text Characters

Because text characters are vector graphics, individual characters can have borders.

It is done with CSS. No JavaScript required.

The border, correctly called "stroke", can be customized. The stroke's color can be specified. And the stroke width can be specified.

The fill color can also be specified.

Here is an example.

The fill color is aqua. The stroke is blue and 2 pixels wide.

Here is another example. Its fill color is yellow. The stroke width is 4 pixels. And the stroke color is orange‑ish.

The fill color for the third and last example is specified as transparent so the background shows through.

For the example, the text was put into a div with a gradient-color background. It works just as well with a solid color or with a background image.

The stroke width for the characters is 2 pixels and the stroke color is red.

Compatibility

It works with the latest versions of Safari, Firefox, Chrome, and Opera. I was unable to test this with Edge.

If someone's browser doesn't recognize the CSS, the text will be the default color. In other words, it degrades gracefully.

A Tool to Generate the CSS for Character Color and Stroke

A tool was created to design color and stroke for text characters and generate the CSS to implement the design.

Use the tool to specify your preferences. It will show you the result and give you the code for the CSS definitions.

Type your specifications in the form. The box above the form is a preview. The box below the form contains the CSS style.

Being able to border text characters with fill and stroke colors and sizes, including transparent fill, provides a lot of design possibilities. Besides, it is just plain fun.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager