Grow your CSS skills. Land your dream job.

list-style

Last updated on:

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

More Demo

See the Pen HTML List Demos by Matt West (@matt-west) on CodePen.

Related Properties

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.

Comments

  1. Good explanation! I was not sure what values i can add on list-style other than type .

  2. Permalink to comment#

    hi , how to change bullet size? thanks

    • Bullet lists are proportional to your font size. If you increase your font size, the list bullets will also get bigger.

      If you want to specifically target the bullet list size without touching the font, you might need to simply upload your own custom bullet image.

  3. Hey, aren’t these ones valid as well:

    cjk-ideographic
    hiragana
    katakana
    hiragana-iroha
    katakana-iroha

  4. Muhammad Naeem
    Permalink to comment#

    very helpful

  5. Marty O'Neil
    Permalink to comment#

    So how do I create a list with multiple bullets?
    Like a list within the list?

  6. Bayanna
    Permalink to comment#

    How to bring the closing bracket instead of dot in lower-alpha list through CSS?

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".