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. User Avatar
    Damodar Bashyal
    Permalink to comment#

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

  2. User Avatar
    Permalink to comment#

    hi , how to change bullet size? thanks

    • User Avatar
      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.

    • User Avatar
      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 ;-)

    • User Avatar
      Permalink to comment#


  3. User Avatar
    Hugh Grigg
    Permalink to comment#

    Hey, aren’t these ones valid as well:


    • User Avatar
      Permalink to comment#

      Yes, they are indeed!

      I love using the iroha list types.

  4. User Avatar
    Muhammad Naeem
    Permalink to comment#

    very helpful

  5. User Avatar
    Marty O'Neil
    Permalink to comment#

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

  6. User Avatar
    Permalink to comment#

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

  7. User Avatar
    ur mom
    Permalink to comment#

    omg stupid fäggit

  8. User Avatar
    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?

    • User Avatar
      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. User Avatar
    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

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      Permalink to comment#


  10. User Avatar
    aishwarya ravi
    Permalink to comment#

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

  11. User Avatar

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

  12. User Avatar

    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. User Avatar
    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:

  14. User Avatar
    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!

  15. User Avatar
    Permalink to comment#

    how do I create a selector for the empty list-style-image? Assume I have the following rules:

    #menu-Custom {
      list-style-image: url("file:///X:/Dev/Mozilla/Chibi-32.png")
    #menuOnTop-menu-Custom > image {   
      width: 16px;
      height: 16px;
      margin-left: 5px;

    and allow the user to pick an image – I have javascript setting = cssUri

    which I get from a file they point at. But I want to also set = ‘none’;

    and for that case define for the empty image

    #menuOnTop-menu-Custom > image[url=none]  {

    what is the correct selector for image = none ?

  16. User Avatar
    Permalink to comment#

    nice article …. how did you have the grey background on list ? that cool …

  17. User Avatar
    Permalink to comment#

    Is there any way to use a certain char? More exactly a html entity like “&star;” ?


  18. User Avatar
    Permalink to comment#

    Replying to myself, I was able to make it work with info from using:

    ul { list-style-type: “★”; }

    However I was not able to user &star; I had to paste it from the page into the editor, that could be a problem.

    It works with the Sea Monkey browser, but not with Pale Moon.

  19. User Avatar
    Permalink to comment#

    I’ve made a mistake… !important in my previous comment isn’t usefull…

  20. User Avatar
    Permalink to comment#

    There should be finally implemented ::market what styling bullets. I would like to not to use custom images and so on. Images are bad unless you use SVG.

  21. User Avatar
    Permalink to comment#

    I want a “gallerylike” page with numbered images. Adding them in a list with links floating items is OK. It seems about like this:
    | Image |
    |- Title -|

    I want to have the images automatically numbered left of the Title. Using list-style:decimal works fine. But the images are (of course) on left before the image.
    Is there a way how to set the bullet/number position to get
    |- Nr. Title -|

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.