How to remove bullet points from list in CSS

Last updated:10th Aug 2022

In this article, we will remove bullet points from the list. To remove bullet points from the order or unorder list use CSS property list-style-type or list-style to none.

 list-style-type : none;
 or
 list-style : none;

for example, you have a list with bullet points.


<ul>
  <li> first list item </li>
  <li> Second list item </li>
</ul>

To get rid of bullet points from the list in HTML,you should add the list-style-type : none or list-style : none;in the unordered list tag or ordered list tag.

In the below example, we have used inline CSS for removing bullet points from the list.


 <ul style="list-style:none;">
   <li> first list item </li>
   <li> Second list item </li>
 </ul>

Although the above example works perfectly, but if you have created ol ( ordered list ) or ul ( unordered list ) in multiple places and you want to remove all the bullet points from all places, in these scenarios you should use external or internal CSS.

Remove bullet points in HTML by using internal CSS

In the below example, we have used internal CSS


<HTML>
 <head>
  <style>
     ul {
	 list-style: none;
       }
  </style>
 </head>
<body>
  <ul>
    <li> menu card 1 </li>
    <li> menu card 2</li>
    <li> menu card 3</li>
  </ul>
</body>
</html>