Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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;

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

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:



Last Updated : 05 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads