list-style

Values

• inside or outside: becomes list-style-position (whether the marker sits inside the line or outside it).
• An image such as url(…): becomes list-style-image (the image used as the marker).
• A keyword such as square or decimal, or a quoted string: becomes list-style-type (the kind of marker).

The three can come in any order. Any you leave out go back to their initial values (outside, none and disc). The controls on this page write them in the order of the spec syntax (position, image, type).

Where none goes

none is valid for both list-style-image and list-style-type, so it goes to whichever of the two the rest of the value does not set.

• list-style: none: both the image and the kind are none, so there is no marker.
• list-style: none square: the image is none and the kind is square.
• list-style: url(…) none: the image is url(…) and the kind is none.
• list-style: none square url(…): there is nowhere for none to go, so the whole declaration is ignored.

Giving both an image and a kind

When the image cannot be loaded, the list-style-type marker is shown instead. With list-style: url(check.svg) circle, a hollow circle appears if the image does not.

The preview on this page shows three lines with markers (divs with display: list-item) that inherit the list-style written on the box.

Watch out

• All three list-style properties are inherited, so they usually go on the ul or ol, not on each li.
• In Safari, the VoiceOver screen reader may not announce a list with list-style: none as a list. To keep it announced as a list, add role="list" to the ul.