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.
Master JavaScript

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.

Share on
  • twitter
  • facebook
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 less time.

Learn More

Recommended