Styles: Stroke-Opacity, Width, Dasharray, and Linecap

stroke-opacity

The stroke-opacity style changes the transparency of the stroke (line) of an element.

The valid range for stroke-opacity is from 0 (completely transparent) to 1 (solid colour). We should make the distinction at this point that stroke-opacity affects only the line or border of an element, whereas opacity will affect the entire element.

The following code snippet creates an empty circle with a red border. The opacity value of .2 creates a degree of transparency for the stroke, which will show the grid lines underneath (or at least make it appear more “muted”).