CSS list-style Property

Markers are the bullets on a list of items.

The list-style property specifies the markers for the items.

This includes marker type, position, and, optionally, an image.

Example

#

A list with list-style set to square. Each item has a square bullet point.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<ul style="list-style: square">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>
</ul>

Using list-style

The list-style property is a shorthand property for:

Syntax

list-style: list-style-type list-style-position list-style-image |
            initial | inherit;

Values

#

Value Description
list-style-type Default is disc. Sets the type of marker.
list-style-position Default is outside. Sets where to place the marker.
list-style-image Default is none. Sets the type of marker.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Tip:  See list-style-type for a list of bullet and numeric marker options.


Browser support

This table shows when list-style support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides