Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/css/-webkit-text-stroke/index.md
6532 views
---
title: "-webkit-text-stroke"
slug: Web/CSS/-webkit-text-stroke
page-type: css-shorthand-property
browser-compat: css.properties.-webkit-text-stroke
---

{{CSSRef}}

The -webkit-text-stroke CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties {{cssxref("-webkit-text-stroke-width")}} and {{cssxref("-webkit-text-stroke-color")}}.

/* Width and color values */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
text-stroke: inherit;
text-stroke: initial;
text-stroke: unset;

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

Values

  • {{cssxref("<length>")}}

    • : The width of the stroke.

  • {{cssxref("<color>")}}

    • : The color of the stroke.

Formal definition

{{CSSInfo}}

Formal syntax

{{csssyntax}}

Examples

Adding a red text stroke

HTML

<p id="example">The stroke of this text is red.</p>

CSS

#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

Result

{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also