By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

How to remove bullets on lists using CSS

This Article is showing how to remove the bullets on lists using the list-style-type property of CSS.

Edited: 2011-03-16 02:38

If you want to remove bullets on lists, then you need to use the list-style-type property of CSS, as documented in the CSS reference on Brugbart.

To remove the bullets of your lists, you will need to set the list-style-type property to none using either external StyleSheets, or Internal CSS.

If you want to see what else that you can change about HTML lists, then check out the List Properties of CSS in the reference.

If you are trying to get cross-browser results, then remember to reset the Margin and Padding, since browser defaults often differ.

Remove bullets on list using CSS

The below example can be tested directly in your browser, and should show an ordered list without the bullets.

<!DOCTYPE html>
<html lang="en-US">

  <head>

    <title>How to remove bullets on lists</title>
    <style type="text/css">
    * {margin:0;padding:0;}
    ol {
     padding: 0.5em;
     list-style-type:none;
    }
    </style>
  </head>

  <body>
      <ol>
       <li>List Item</li>
       <li>List Item</li>
       <li>List Item</li>
      </ol>
  </body>

</html>

Brugbart Vision!

Above example both removes the bullets, and sets a cross-browser padding, which should show the same in all browsers. This is because some browsers may use padding as default, while other browsers is using margin.