list-style

Last updated on: May 1, 2013

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

Non-keyword values are introduced in CSS3, but there is little, if any, browser support for them.

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

Check out this Pen!

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 padding removed from the lists and a left red border added:

Check out this Pen!

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);
}

Related Properties

display

Other Resources

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Works	Works	Works	Works	Works	Works	Works

IE6/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.

treehouse : what would you like to learn today?

Almanac