How to Remove List Styling Bullets in CSS

By Robert Allen

By default, the

    unordered list tag in HTML creates a list of elements preceded by a round bullet. In certain situations, you may want to remove the bullets altogether --- for example, if you want to keep the clean layout of the list without the distraction of the bullet, or if you're using the
      to generate a drop down menu. To accomplish this, use the "list-style-type" CSS style attribute, part of the CSS specifications since the first version.

Step 1

Open the .html or .htm file that contains the unordered list whose bullets you want to remove. Use a plain text editor, like Notepad, to avoid introducing errors into the HTML code.

Step 2

Scroll down to the code that begins the unordered list, which will be marked by a "

    " tag. Add the following code after the "ul" and before the ">": style="list-style-type: none;".The code should now look like this: "

Step 3

Save the HTML file, and close the text editor. Open the HTML file in your web browser to make sure that the bullets have been removed from the webpage.

Tips & Warnings

  • If you want to remove the bullets from all unordered lists on the page, you can add the following line of code between the "" and "" tags in the HTML source code: "".