How to outline text in HTML / CSS

How to Outline Text in HTML and CSS

Learn various techniques to add outlines or strokes to text using HTML and CSS, enhancing visual appeal and readability.

Outlining text in web design can significantly improve its visual impact, making headlines pop or improving readability against busy backgrounds. While there isn't a direct text-outline CSS property, several creative approaches using existing CSS features can achieve this effect. This article explores the most common and effective methods, from simple shadows to more advanced SVG techniques.

Method 1: Using text-shadow for a Basic Outline

The text-shadow property is a versatile CSS feature primarily used to add shadows to text. By applying multiple shadows with a small blur radius and offsetting them in different directions, you can simulate a text outline. This method is widely supported and relatively simple to implement, making it a good starting point for basic outlining needs.

.outlined-text-shadow {
  color: white; /* Text fill color */
  text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
     1px -1px 0 #000, /* Top-right shadow */
    -1px  1px 0 #000, /* Bottom-left shadow */
     1px  1px 0 #000; /* Bottom-right shadow */
}

CSS using text-shadow to create a 1px black outline.

Method 2: Leveraging -webkit-text-stroke for WebKit Browsers

For browsers based on the WebKit engine (like Chrome, Safari, and newer Edge versions), the -webkit-text-stroke property provides a direct and efficient way to outline text. This property allows you to specify both the width and color of the stroke, offering a cleaner and often more precise outline compared to text-shadow.

.outlined-webkit-stroke {
  color: white; /* Text fill color */
  -webkit-text-stroke: 1px black; /* 1px black outline */
  /* For cross-browser compatibility, consider adding a fallback with text-shadow */
}

CSS using -webkit-text-stroke for a direct outline.

Method 3: Advanced Outlining with SVG

For the most control and flexibility, especially for complex outlines or when dealing with vector graphics, SVG (Scalable Vector Graphics) is an excellent choice. You can embed SVG directly into your HTML or reference it as an image. Within SVG, you can define text elements and apply stroke and fill properties, offering precise control over the outline and fill colors, as well as stroke width and other visual attributes.

<svg width="300" height="100">
  <text x="10" y="70" font-family="Arial" font-size="60"
        fill="white" stroke="black" stroke-width="2">
    SVG Outline
  </text>
</svg>

HTML with embedded SVG for outlined text.

flowchart TD
    A[Start] --> B{Choose Outline Method?}
    B -->|Simple, Wide Support| C[Use text-shadow]
    B -->|WebKit Only, Precise| D[Use -webkit-text-stroke]
    B -->|Advanced, Vector Control| E[Use SVG Text]
    C --> F[Apply multiple text-shadows]
    D --> G[Set -webkit-text-stroke-width and -webkit-text-stroke-color]
    E --> H[Define <text> element with stroke and fill attributes]
    F --> I[End]
    G --> I[End]
    H --> I[End]

Decision flow for choosing a text outlining method.