• Post category:CSS

Simple Way to Make a List that Lists its Items with Squares

How do you Make a List that Lists its Items with Squares?

In this article, we will learn How do you make a list that lists its items with squares? There are two types of lists ordered and unordered list. If we create an ordered list, we cannot achieve a square item because ordered lists are displayed only numbers, Romans, alphabets, etc. So, we can use an unordered list to make the square items. Let’s see how to create an unordered list:

To create an unordered list, we need to use HTML <ul> tag and inside it, we need to create a list item using the <li> tag as in the below code.

HTML:

<h5>Country Names:</h5>
<ul>
   <li>India</li>
   <li>USA</li>
   <li>China</li>
   <li>UK</li>
   <li>Russia</li>
</ul>

Output:

make a squares lists items
See, the above output, we have disc/circle shape style bullet points for a separate list. To make Square shape list items, we need to select <ul> tag using the CSS element selector and then set CSS “list-style-type” property to “square“.

CSS:

ul{
  list-style-type: square;
}

Output:

"How

The default value of the “list-style-type” property is the disc.  I hope you have understood a little bit about creating list items with a square shape using “list style type” property  in this article. If you have any doubts about this article then please comment below.

Leave a Reply