Treehouse: 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. Damodar Bashyal
    Permalink to comment#

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

  2. Alpay
    Permalink to comment#

    hi , how to change bullet size? thanks

    • Augustus Yuan
      Permalink to comment#

      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.

    • Willem
      Permalink to comment#

      You could use an image, create a “bullet image” and use it like it’s done in the examples. you can use another list-style-type for every if needed, create classes to do so…
      /** Begin style for list **/
      .ligreen {
      list-style-image: url(images/ligreen.png);
      }
      .lired {
      list-style-image: url(images/lired.png);
      }
      .liblue {
      list-style-image: url(http://www.tnhteam.com/plaatjes/liblue.gif);
      }
      /** End style for list **/

      <!–// Begin html example //–>
      <ul>
      <li class=”ligreen”>Green bullet item</li>
      <li class=”lired”>Red bullet item</li>
      <li class=”liblue”>Blue bullet item</li>
      </ul>
      <!–// End html example //–>

      You will need to create the pictures to fit your needs and you can use full http path, I used both in this example…

      I hope this is helpful to you.

      Happy coding ;-)

  3. Hugh Grigg
    Permalink to comment#

    Hey, aren’t these ones valid as well:

    cjk-ideographic
    hiragana
    katakana
    hiragana-iroha
    katakana-iroha

    • Armstrongest
      Permalink to comment#

      Yes, they are indeed!

      I love using the iroha list types.

  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?

  7. ur mom
    Permalink to comment#

    omg stupid fäggit

  8. Bonnie
    Permalink to comment#

    Thanks! I have the drop downs working, but they don’t link to the pages. I have the exact url from the pages, but it’s not working. What am I doing wrong?

    • Willem
      Permalink to comment#

      @Bonnie What isn’t working? Do you have an URL, I’d like to help you to get it to work.. Best Regards, Willem

  9. Neil
    Permalink to comment#

    newbie >> so an image can’t be saved to an images folder, and pulled from there to use in place of the normal bullet? One has to pull an image off of a url…. somewhere….? Thanks, Neil

    • chris
      Permalink to comment#

      because this is a css solution you can not just drag an image into the code, while you can put the image into a folder you will still need to tell the code where to find this image, which usually is done with a url.

    • Sean K.
      Permalink to comment#

      All images are pulled via URLs, whether they’re local URLs or explicit full URLs. Even “images/yourimage.jpg” is a url, it’s just what’s called a “relative URL”, because it’s relative to where the file is that’s calling for it.

  10. aishwarya ravi
    Permalink to comment#

    I want to give hotspot for the image which i give as bullets.
    how to do that?

  11. Till

    Just to say that there is no notion of description list in HTML 5. but rather definition list.

  12. Vašek

    Hi, how can I change the color of numbers before list items? I can not find any css property to do that. For now, I put span in li and change color for whole list and than for items…

  13. Bob Prokop

    Using list-style-type for definition data elements inside a definition list (or for that matter anything but a ul or ol still doesn’t work in Firefox — and the bug has been open for over 7 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=436662

  14. Kathryn Grace
    Permalink to comment#

    Thank you so much for this. I’ve been trying to solve this problem for weeks. Your solution totally works!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```