# CSS: “stroke-width”: “-X” negative values are not allowed.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-stroke-width-negative-values-are-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `stroke-width` property controls the thickness of the outline (stroke) drawn around shapes and text, primarily used in SVG but also applicable to HTML elements via CSS. According to both the SVG specification and the CSS standard, `stroke-width` accepts only non-negative values — that is, zero or any positive number, optionally with a CSS length unit like `px`, `em`, or `rem`. A unitless number is also valid and is interpreted in the current coordinate system's user units.

Negative values are logically meaningless for stroke width because you cannot draw an outline with negative thickness. Browsers will typically ignore or discard the invalid declaration, meaning the stroke may render with an unexpected default width or not at all. Beyond rendering issues, using invalid CSS values causes W3C validation errors, which can indicate broader quality problems in your code and may lead to unpredictable behavior across different browsers.

A common cause of this error is dynamic value generation — for example, a CSS `calc()` expression or a preprocessor variable that inadvertently produces a negative result. If your stroke width is computed, make sure to clamp the value so it never goes below `0`.

## How to fix it

1. **Replace negative values with `0` or a positive number.** If you intended no visible stroke, use `0`. If you wanted a visible stroke, use the appropriate positive thickness.
2. **Guard computed values.** If the value comes from a `calc()` expression or CSS custom property, use `max()` to ensure the result is never negative — for example, `stroke-width: max(0px, calc(10px - 15px))`.
3. **Check inline styles and stylesheets.** The error can appear in both inline `style` attributes and external/internal CSS. Search your codebase for any `stroke-width` declaration with a negative number.

## Examples

### ❌ Invalid: negative `stroke-width` on an HTML element

```html
<p style="stroke-width: -1">Some content</p>
```

This triggers the validator error because `-1` is not an allowed value.

### ✅ Fixed: non-negative `stroke-width`

```html
<p style="stroke-width: 0">Some content</p>
```

Using `0` removes the stroke entirely and is valid.

### ❌ Invalid: negative `stroke-width` on an SVG element

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="-3" fill="none"/>
</svg>
```

### ✅ Fixed: positive `stroke-width` on an SVG element

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none"/>
</svg>
```

### ✅ Using `max()` to clamp a computed value

```html
<div style="stroke-width: max(0px, calc(5px - 10px))">Some content</div>
```

Here, `calc(5px - 10px)` would produce `-5px`, but `max(0px, ...)` ensures the final value is `0px`, keeping the CSS valid.