CSS List-Style Examples

See the CSS list-style Property in Action

Return to the CSS List-Style article.

CSS List-Style Types

All of the following examples will use this HTML list. The only thing that will change is the list-style type in the CSS.

<ul>
<li>This is a sample list</li>
<li>There are three elements in it</li>
<li>It's a UL list, but may be numbered by the styles</li>
</ul>

list-style: none;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: circle;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: disc;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: square;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

Return to the CSS List-Style article.

list-style: armenian;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: decimal;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: decimal-leading-zero;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: georgian;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: lower-alpha;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

Return to the CSS List-Style article.

list-style: lower-greek;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: lower-latin;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: lower-roman;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: upper-alpha;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: upper-latin;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

list-style: upper-roman;

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

Return to the CSS List-Style article.

CSS List-Style Positions

All of the following examples will use this HTML list. The only thing that will change is the list-style position in the CSS.

<ul>
<li>This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
<li>There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
<li>It's a UL list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
</ul>

list-style: outside;

• This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
• There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
• It's a UL list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum

list-style: inside;

• This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
• There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
• It's a UL list, but may be numbered by the styles. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum

Return to the CSS List-Style article.

CSS List-Style Image

All of the following examples will use this HTML list. The only thing that will change is the list-style image in the CSS.

<ul>
<li>This is a sample list</li>
<li>There are three elements in it</li>
<li>It's a UL list, but may be numbered by the styles</li>
</ul>

list-style: url('http://z.about.com/d/webdesign/1/0/c/8/1/16-heart-gold-m.png');

• This is a sample list
• There are three elements in it
• It's a UL list, but may be numbered by the styles

Return to the CSS List-Style article.

Heart icon courtesy Joseph North.