Skip to content
Related Articles

Related Articles

How to create an unordered list with square bullets in HTML ?

Improve Article
Save Article
Like Article
  • Last Updated : 13 Jan, 2022

In this article, we will see how to create an unordered list with square bullets using HTML. To create an unordered list with square bullets, we will use CSS list-style-type: square property.

The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style).

Syntax:

list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none|
inherit;

Approach: In the below example, we will create an unordered list items using <ul> and <li> tags and add CSS list-style-type: square style on <ul> element to make square bullets.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to create an unordered list 
        with square bullets in HTML?
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to create an unordered list 
        <br>with square bullets in HTML?
    </h3>
  
    <p>Web Development Technologies - </p>
    <ul style="list-style-type:square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!