List-style - CSS-Tricks

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul { list-style: <list-style-type> || <list-style-position> || <list-style-image>; }

Here’s an example of the syntax:

ul { list-style: square outside none; }

Which would be the same as the following longhand version:

ul { list-style-type: square; list-style-position: outside; list-style-image: none; }

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

MDN has a more complete list. Non-keyword values were introduced in CSS3, and are starting to see some support, like:

ul { list-style-type: "→"; }

The following demo includes a group of unordered lists to demonstrate each keyword value:

The list-style-type property applies to all lists, and to any element that is set to display: list-item.

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: inside or outside. These are demonstrated below with the padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of “none” or a URL that points to the image:

ul { list-style-image: url(images/bullet.png); }

More Demos

Browser support

Internet Explorer 6 and 7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image) on the list items.

More information

counters lists marker Article on May 18, 2018

Using CSS Counters for Custom List Number Styling

Chris Coyier list list-style-image list-style-position list-style-type marker Article on May 5, 2020

List Style Recipes

Chris Coyier Article on Dec 5, 2011

Numbering In Style

Chris Coyier

Related properties

display Almanac on Sep 5, 2011

display

.element { display: inline-block; } Sara Cope Almanac on Aug 3, 2015

::marker

li::marker { color: red; } Geoff Graham