CSS list-style property

Property values

list-style-type

discDefault

disc as item markers.

list-style-type: disc;

Try it { }

circle

circle as item markers.

list-style-type: circle;

Try it { }

decimal

decimal number as item markers

list-style-type: decimal;

Try it { }

decimal-leading-zero

decimal number as item markers with leading zero.

list-style-type: decimal-leading-zero;

Try it { }

lower-roman

lower roman numbers as item markers

list-style-type: lower-roman;

Try it { }

upper-roman

upper roman numbers as item markers.

list-style-type: upper-roman;

Try it { }

lower-greek

lower greek letters as item markers

list-style-type: lower-greek;

Try it { }

lower-latin

lower case latin letters as item markers

list-style-type: lower-latin;

Try it { }

upper-latin

upper case latin letters as item markers

list-style-type: upper-latin;

Try it { }

lower-alpha

lower alphabets as item markers.

list-style-type: lower-alpha;

Try it { }

upper-alpha

upper aphabets as item markers

list-style-type: upper-alpha;

Try it { }

armenian

armenian letters as item markers

list-style-type: armenian;

Try it { }

georgian

georgian letters as item markers

list-style-type: georgian;

Try it { }

list-style-position

outside Default

In this case, the markers don't merge themselves with the list item content.

list-style-position: outside;

Try it { }

inside

In this case, the markers become a part of the list item content.

list-style-position: inside;

Try it { }

list-style-image

noneDefault

no image is used as the content of list item markers. In this case, list-style-type defines the type of list item markers.

list-style-image: none;

Try it { }

url(image-address)

It defines the address of the image that is used as the content of list item markers.

list-style-image: url('img/web4college.png');

Try it { }