Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
Use the CSS -webkit-text-stroke shorthand on the text element you want to outline:
.title {
-webkit-text-stroke: 2px #000;
}The first value controls stroke width and the second controls stroke color. Keep the element’s normal color declaration so the text remains readable when a browser does not apply the stroke.
Basic outlined text
Apply the property directly to a heading, paragraph, or other text element. The text remains live HTML: it can be selected, searched, resized, and read by assistive technology.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<h1 class="title">Outlined heading</h1>.title {
color: white;
-webkit-text-stroke: 1px black;
}A width of 1px gives a subtle edge. Increase it only when the typeface, size, and background still preserve clear counters and joins.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How -webkit-text-stroke works
-webkit-text-stroke is a shorthand for -webkit-text-stroke-width and -webkit-text-stroke-color. Its width value is a length, such as 1px or 0.08em, and its color value accepts any CSS color.
.title {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}- The initial stroke width is
0, so no outline appears until you set a nonzero width. - The initial stroke color is
currentcolor. Changing only the color does not create a visible outline while the width remains zero. - The property is inherited and applies to all elements, so set it on a specific component class when you do not want descendants to inherit it.
Progressively enhance the design
Keep a usable fill color as the baseline, then add the outline only when feature detection confirms support:
.title {
color: white;
}
@supports (text-stroke: 1px) or (-webkit-text-stroke: 1px) {
.title {
-webkit-text-stroke: 1px black;
}
}The documented feature-query pattern tests both the unprefixed and prefixed names. In current practice, the prefixed declaration is the implementation you will commonly write, while the ordinary color remains the fallback.
Browser support and standards status
MDN labels the feature “Baseline: Widely available” and reports support across many devices and browser versions since April 2017. The formal syntax is described in CSS Borders and Box Decorations Module Level 4, but browsers do not necessarily implement every part of a specification at the same time. Use the feature query when a stylesheet must apply the effect conditionally, and test the actual fonts and browsers in your support matrix.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Make the outline remain legible
- Use restrained widths at small text sizes. Heavy strokes can close counters in letters such as a, e, and o, or make joins look muddy.
- Check the contrast of the complete rendered glyph: fill, outlined edge, and background. A white fill with a dark edge behaves differently from a dark fill with a light edge.
- Do not use an outline as the only way to communicate meaning. Pair decorative styling with text, structure, icons, or another nonvisual cue.
- Inspect headings in the actual font stack. Stroke appearance changes with weight, hinting, antialiasing, size, and device pixel density.
Choosing a fallback or another format
| Approach | Best use | Trade-offs |
|---|---|---|
-webkit-text-stroke |
Live text that needs a straightforward width-and-color outline | Requires browser support testing; thick strokes can reduce legibility |
text-shadow |
A conservative contrast treatment when a true stroke is unavailable | Does not provide the same direct stroke control; the visual result varies with offsets and blur |
| SVG or an image | Fixed, art-directed lettering where the letterforms themselves are part of the artwork | Less flexible as ordinary page text and may require separate accessible text handling |
A modest text-shadow can support contrast in a fallback stylesheet, but there is no universal recipe that looks identical to a text stroke. Judge the result at the target size rather than assuming the fallback has the same accessibility effect.
Troubleshoot common problems
The outline is not visible
Confirm that the width is greater than zero and that the declaration is applied to the intended element. A color alone cannot produce a stroke when the width is still at its initial value of 0.
The text looks filled by the outline
Reduce the width, increase the text size, or choose a lighter font weight. Check counters and tight joins at the smallest size used in your interface.
The result differs between browsers
Verify the prefixed declaration, keep the normal color fallback, and test with the exact font files and rendering environments you support. Use the @supports rule if unsupported browsers must receive a different treatment.
Best Value
The stroke appears on unintended descendants
Because the property inherits, scope it to the heading or component class rather than placing it on a broad ancestor.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.The Bottom Line
For selectable, searchable outlined text, start with -webkit-text-stroke, preserve a readable fill-color fallback, and keep the width modest enough that the font remains clear.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
