CSS list-style-position Property

❮ Previous Complete CSS Reference Next ❯

Example

Specify the position of the list-item markers:

ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Definition and Usage

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:

Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola

list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola

Show demo ❯

Default value:	outside
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.listStylePosition="inside" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
list-style-position	1.0	4.0	1.0	1.0	3.5

CSS Syntax

list-style-position: inside|outside|initial|inherit;

Property Values

Value	Description	Demo
inside	The bullet points will be inside the list item	Demo ❯
outside	The bullet points will be outside the list item. This is default	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS List

CSS reference: list-style property

HTML DOM reference: listStylePosition property