Text
-webkit-text-stroke
-webkit-text-stroke draws a line along the outline of the text. It is a shorthand taking a width and a color in any order.
Syntax
<line-width> || <color>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
-webkit-text-stroke3px-webkit-text-stroke-width
#4a86cb-webkit-text-stroke-color
Code
.box {
-webkit-text-stroke: 3px #4a86cb;
}Controls
-webkit-text-stroke-width3px
-webkit-text-stroke-color#4a86cb
About
Standard despite the prefix
Despite the -webkit- prefix, every major browser supports it under this name, and it is specified in the Compatibility Standard. Without a color it uses currentcolor, the text color.
Half inside, half outside
The stroke is centered on the outline and painted over the fill, so thicker strokes eat into the letters. Where supported, paint-order: stroke fill moves the stroke under the fill, outlining the text without thinning it.
Hollow text
Combine it with color: transparent (or -webkit-text-fill-color: transparent) to remove the fill and keep only the outline.