How to Get Rid of Bullet Points in CSS

Ferenc Almasi • 2022 September 13 • 📖 2 min read

Add a list-style-type: none to your unordered list to get rid of bullet points in CSS.

ul, ol {
    list-style-type: none;
}
Copied to clipboard!

The list-style-type property can take on multiple values. To demonstrate the differences between each value, take a look at the following example:

  • list-style-type set to:
  • none
  • list-style-type set to:
  • circle
  • list-style-type set to:
  • disclosure-closed
  • list-style-type set to:
  • armenian

You could also set list-style: none, which is a shorthand property for list-style-image, list-style-position, and list-style-type that we used in the above examples. It has the same effect as setting list-style-type, but you also have the ability to set the other two with this one rule. You can find the full list of supported values below:

list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: cjk-decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-alpha;
list-style-type: lower-latin;
list-style-type: upper-alpha;
list-style-type: upper-latin;
list-style-type: arabic-indic;
list-style-type: armenian;
list-style-type: bengali;
list-style-type: cambodian;
list-style-type: khmer;
list-style-type: cjk-earthly-branch;
list-style-type: cjk-heavenly-stem;
list-style-type: cjk-ideographic;
list-style-type: devanagari;
list-style-type: ethiopic-numeric;
list-style-type: georgian;
list-style-type: gujarati;
list-style-type: gurmukhi;
list-style-type: hebrew;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: japanese-formal;
list-style-type: japanese-informal;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: korean-hangul-formal;
list-style-type: korean-hanja-formal;
list-style-type: korean-hanja-informal;
list-style-type: lao;
list-style-type: lower-armenian;
list-style-type: malayalam;
list-style-type: mongolian;
list-style-type: myanmar;
list-style-type: oriya;
list-style-type: persian;
list-style-type: simp-chinese-formal;
list-style-type: simp-chinese-informal;
list-style-type: tamil;
list-style-type: telugu;
list-style-type: thai;
list-style-type: tibetan;
list-style-type: trad-chinese-formal;
list-style-type: trad-chinese-informal;
list-style-type: upper-armenian;
list-style-type: disclosure-open;
list-style-type: diclosure-closed;
Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

How to Set Custom Bullet Points

You can also set custom bullet points in CSS using the @counter-style at-rule. For example, the following at-rule will create emoji thumbs up for list elements:

@counter-style thumbs {
    system: cyclic;
    symbols: "👍";
    suffix: " ";
}

@counter-style fruits {
    system: cyclic;
    symbols: 🥝 🍓 🍊;
    suffix: " ";
}

ul {
    list-style-type: thumbs;
    list-style-type: fruits;
}
Copied to clipboard!
  • one
  • two
  • three
  • Kiwi
  • Strawberry
  • Tangerine

Notice that in the second example, the symbols are not between quotes, otherwise, we would display all three icons for each individual element. You can also change the system from cyclic to fixed, in which case, only the first three elements will have custom icons, and the rest will fall back to the default style.

Using cyclic on the other hand will cycle through the symbols, meaning that the fourth element in the above example gets a kiwi, the fifth a strawberry, and so on.

JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in 5 hours.

Learn More

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Read more on
🎉 Thank you for subscribing to our newsletter. x