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

Article on Jan 26, 2022

Using CSS Counters for Custom List Number Styling

counters lists marker Chris Coyier Article on May 5, 2020

List Style Recipes

list list-style-image list-style-position list-style-type marker Chris Coyier Article on Dec 8, 2011

Numbering In Style

Chris Coyier

Related properties

Almanac on Oct 15, 2021

display

.element { display: inline-block; } display Sara Cope Almanac on Jan 19, 2025

::marker

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