Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Style unordered lists markers with CSS
The list-style-type property allows you to control the shape or style of unordered list markers. This CSS property provides various options to customize how list items appear.
Syntax
ul {
list-style-type: value;
}
Common list-style-type Values
| Value | Description | Marker |
|---|---|---|
disc |
Default filled circle | ? |
circle |
Empty circle | ? |
square |
Filled square | ? |
none |
No marker | - |
Example: Square Markers
<html>
<head>
<style>
.square-list {
list-style-type: square;
}
</style>
</head>
<body>
<ul class="square-list">
<li>India</li>
<li>UK</li>
<li>US</li>
</ul>
</body>
</html>
Example: Multiple List Styles
<html>
<head>
<style>
.disc-list { list-style-type: disc; }
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }
.none-list { list-style-type: none; }
</style>
</head>
<body>
<h3>Disc (default)</h3>
<ul class="disc-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h3>Circle</h3>
<ul class="circle-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h3>Square</h3>
<ul class="square-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h3>None</h3>
<ul class="none-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
Key Points
- The default value is
discfor unordered lists - Use
noneto remove markers completely - Can be applied inline or through CSS classes
- Works with nested lists as well
Conclusion
The list-style-type property provides simple control over list markers. Choose from disc, circle, square, or none based on your design needs.
Updated on: 2026-03-15T23:18:59+05:30
217 Views
Advertisements