Treehouse: Grow your CSS skills. Land your dream job.


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.


  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.

    • 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(;
      /** End style for list **/

      <!–// Begin html example //–>
      <li class=”ligreen”>Green bullet item</li>
      <li class=”lired”>Red bullet item</li>
      <li class=”liblue”>Blue bullet item</li>
      <!–// 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. Hey, aren’t these ones valid as well:


  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?

    • 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

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:

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