Adding Borders and Strokes to Text with CSS

Styling Text Beyond the Basics

While CSS offers extensive control over text appearance – including font family, size, weight, and color – achieving a bordered or stroked text effect traditionally required image editing or complex workarounds. Modern CSS provides several techniques to accomplish this directly within your stylesheets, allowing for scalable and maintainable text styling. This tutorial will explore these options, from experimental properties to widely supported techniques using text shadows.

The -webkit-text-stroke Property

The most direct approach is using the -webkit-text-stroke property. This CSS property is designed specifically to add a stroke (or border) around text characters. However, it’s important to note that this property is non-standard and has limited browser support, primarily in older WebKit-based browsers (like Safari).

Here’s how it works:

h1 {
  -webkit-text-stroke: 2px black; /* width and color */
  font-family: sans-serif;
  color: yellow;
}

This code applies a 2-pixel black stroke around the text within an <h1> element. The color property sets the fill color of the text itself.

Important Considerations:

• Browser Compatibility: Check Can I use to verify browser support before relying on this property for production websites.
• Prefixing: The -webkit- prefix indicates that this is a WebKit-specific extension.

While simple, the limited support makes this a less reliable solution for widespread use.

Leveraging text-shadow for Stroke Effects

A more versatile, albeit slightly more complex, approach involves using the text-shadow property. By strategically applying multiple shadows, you can simulate a stroke around the text.

The basic idea is to create small shadows offset in all directions around each character. This creates the illusion of a border.

h1 {
  text-shadow:
    -1px 0 black,
    0 1px black,
    1px 0 black,
    0 -1px black;
  font-family: sans-serif;
  color: yellow;
}

This code creates a 1-pixel black "stroke" around the text.

Limitations:

• Thickness: Increasing the thickness of the stroke becomes increasingly complex. As you increase the offset values in text-shadow, the effect can become blurred or distorted, especially with larger font sizes or complex glyphs.
• Performance: Using a large number of text-shadow values can impact rendering performance.

Advanced text-shadow Techniques for Thicker Strokes

For thicker strokes, you’ll need to add more shadow offsets. The following example demonstrates a more comprehensive implementation for a 2px stroke:

h1 {
  text-shadow:
    1px 1px 0 black,
    -1px 1px 0 black,
    1px -1px 0 black,
    -1px -1px 0 black,
    0px 1px 0 black,
    0px -1px 0 black,
    -1px 0px 0 black,
    1px 0px 0 black,
    2px 2px 0 black,
    -2px 2px 0 black,
    2px -2px 0 black,
    -2px -2px 0 black,
    0px 2px 0 black,
    0px -2px 0 black,
    -2px 0px 0 black,
    2px 0px 0 black,
    1px 2px 0 black,
    -1px 2px 0 black,
    1px -2px 0 black,
    -1px -2px 0 black,
    2px 1px 0 black,
    -2px 1px 0 black,
    2px -1px 0 black,
    -2px -1px 0 black;
  font-family: sans-serif;
  color: yellow;
}

This creates a thicker, more defined stroke, but at the cost of increased code complexity. For projects requiring a consistently stroked text effect, consider using a CSS preprocessor (like Sass or Less) to generate this code automatically using a mixin or function.

Using SCSS Mixins for Cleaner Code

SCSS (Sassy CSS) provides a powerful way to encapsulate repetitive code into reusable mixins. Here’s an example of a SCSS mixin to generate the stroke effect:

@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke * -1;
  @for $i from $from through $stroke {
    @for $j from $from through $stroke {
      $shadow: append($shadow, $i * 1px $j * 1px 0 $color, comma);
    }
  }
  @return $shadow;
}

@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

h1 {
  @include stroke(2px, black);
  font-family: sans-serif;
  color: yellow;
}

This mixin simplifies the process of adding stroked text and makes your CSS more maintainable.

Combining Techniques

You can also combine these techniques. For example, you could use -webkit-text-stroke as a fallback for browsers that support it and use text-shadow for broader compatibility.