📋 CSS List Properties

Last Updated: November 2025

Lists are used to display items in sequence, either ordered (<ol>) or unordered (<ul>).
CSS gives you control over how list bullets, numbers, and spacing appear.

CSS List Properties

Property	Description	Example
list-style-type	Defines bullet or numbering style	list-style-type: square;
list-style-position	Sets bullet position inside or outside	list-style-position: inside;
list-style-image	Uses a custom image as bullet	list-style-image: url('icon.png');
list-style	Shorthand for all list properties	list-style: square inside;

List Style Types

Type	Example	Output
disc	Default for <ul>	• Item
circle	list-style-type: circle;	○ Item
square	list-style-type: square;	■ Item
decimal	Default for <ol>	1. Item
upper-roman	list-style-type: upper-roman;	I. Item
lower-alpha	list-style-type: lower-alpha;	a. Item
none	list-style-type: none;	(no bullet)

🎨 list-style-position

This property controls where the bullet/number is placed relative to the text.

ul {
  list-style-position: inside;
}

Options:

outside → bullets stay outside the content box (default)
inside → bullets move inside (align with text)

🗣 Hinglish Tip: Agar text wrap hota hai, inside me bullet bhi text ke saath move karega.

🔗 Shorthand Property: list-style

Combine multiple list properties into one:

ul {
  list-style: square inside url("icon.png");
}

💡 Order: list-style-type → list-style-position → list-style-image

Report An Issue

← Previous Next →