# text-stroke-width property

The `text-stroke-width` property specifies a stroke or outline width of text characters. The property takes values specified in size units in `px`, `em`, `rem`, etc. You can also set the following values: `thin` (thin line), `medium` (medium line) and `thick` (thick line).

## Syntax

`selector { text-stroke-width: number or thin or medium or thick; }`

## Example

Let's give our text characters a thin stroke:

`<p> Text </p>` `body { width: 100px; height: 50px; } p { -webkit-text-stroke-color: orange; -webkit-text-stroke-width: thin; text-stroke-width: thin; color: white; font-size: 10em; margin-top: 0; font-weight: bold; font-family: Arial; }`

:

## Example

Now let's change the thin stroke to medium:

`<p> Text </p>` `body { width: 100px; height: 50px; } p { -webkit-text-stroke-color: orange; -webkit-text-stroke-width: medium; text-stroke-width: medium; color: white; font-size: 10em; margin-top: 0; font-weight: bold; font-family: Arial; }`

:

## Example

Let's give our text characters a thick stroke:

`<p> Text </p>` `body { width: 100px; height: 50px; } p { -webkit-text-stroke-color: orange; -webkit-text-stroke-width: thick; text-stroke-width: thick; color: white; font-size: 10em; margin-top: 0; font-weight: bold; font-family: Arial; }`

:

## Example

Let's also give our text characters the stroke of `2px`:

`<p> Text </p>` `body { width: 100px; height: 50px; } p { -webkit-text-stroke-color: orange; -webkit-text-stroke-width: 2px; color: white; font-size: 10em; margin-top: 0; font-weight: bold; font-family: Arial; }`

:

## See also

- the `text-stroke` property
  that sets a text stroke
- the `text-stroke-color` property
  that sets a color of text stroke

← →
↑
en ru