DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of Firefox and Internet Explorer may support the property (likely under their own prefixes).
mark {
text-stroke: 2px red;
}The text-stroke property is actually shorthand for two other properties:
text-stroke-width, which takes unit value (1px, 0.125em, 4in, etcetera) and describes the thickness of the stroke effect.text-stroke-color, which takes a color value (hex, rgb/rgba, hsl/hsla, etcetera).
text-stroke also has a companion property, text-fill-color, which will override the color property, allowing for a graceful fallback to a different text color in browsers that do not support text-stroke.
Points of interest
- The stroke drawn by
text-strokeis aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful. - in Webkit,
text-strokeis animatable with CSS Transitions and Animations – but only the stroke color, not the stroke width. - A more browser-compatible (and arguably robust) stand-in for the
text-strokeeffect is usingtext-shadow, which is outlined in this CSS-Tricks article.
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 49* | No | 15* | 3.1* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 101* | 100* | 2.1* | 4.0-4.1* |
More information
Related
text-decoration
.element { text-decoration: underline; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
text-underline-offset
.element { text-underline-offset: 0.5em; }
text-underline-position
.element { text-underline-position: under; }
nice tricks thanks
Regarding outside strokes, please see my wish:
https://github.com/w3c/fxtf-drafts/issues/117
It work for Firefox, Chrome and Edge and others beside IE that is dead now, with the
“-webkit” but it said it is Non-standard, so should it be used?
Cool couldn’t remember the name of this selector so I had to search for it manually.
An outside text stroke can be emulated with
text-shadows. There is a handy SASS mixin for this: https://github.com/hudochenkov/sass-text-stroke