The list-style CSS property is shorthand for list-style-type, list-style-image, and list-style-position.
Syntax
CSS
list-style: value;
JS
object.style.listStyle = "value";
Values
<'list-style'> = <'list-style-position'> || <'list-style-image'> || <'list-style-type'>
<'list-style-position'> = inside | outside
inside
No special effect.
outside
If the list item is a block container, the marker box is blockified and placed outside the principal block box.
<'list-style-image'> = <image> | none
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
The element has no marker image.
<'list-style-type'> = <counter-style> | <string> | none
<counter-style> = <counter-style-name> | <symbols()>
<counter-style-name>
A <custom-ident> that is not an ASCII case-insensitive match for "none".
<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed
cyclic
Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list.
numeric
Interprets the list of counter symbols as digits to a place-value numbering system.
decimal
Western decimal numbers (1, 2, 3, ..., 98, 99, 100).
decimal-leading-zero
Decimal numbers padded by initial zeros (01, 02, 03, ..., 98, 99, 100).
arabic-indic
Arabic-indic numbering (١, ٢, ٣, ٤, ..., ٩٨, ٩٩, ١٠٠).
armenian
upper-armenian
Traditional uppercase Armenian numbering (Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).
lower-armenian
Lowercase Armenian numbering (ա, բ, գ, ..., ղը, ղթ, ճ).
bengali
Bengali numbering (১, ২, ৩, ..., ৯৮, ৯৯, ১০০).
cambodian
khmer
Cambodian/Khmer numbering (១, ២, ៣, ..., ៩៨, ៩៩, ១០០).
cjk-decimal
Han decimal numbers (一, 二, 三, ..., 九八, 九九, 一〇〇).
devanagari
devanagari numbering (१, २, ३, ..., ९८, ९९, १००).
georgian
Traditional Georgian numbering (ა, ბ, გ, ..., ჟჱ, ჟთ, რ).
gujarati
Gujarati numbering (૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).
gurmukhi
Gurmukhi numbering (੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).
hebrew
Traditional Hebrew numbering (א, ב, ג, ..., צח, צט, ק).
kannada
Kannada numbering (೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).
lao
Laotian numbering (໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).
malayalam
Malayalam numbering (൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).
mongolian
Mongolian numbering (᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).
myanmar
Myanmar (Burmese) numbering (၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).
oriya
Oriya numbering (୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).
persian
Persian numbering (۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).
lower-roman
Lowercase ASCII Roman numerals (i, ii, iii, ..., xcviii, xcix, c).
upper-roman
Uppercase ASCII Roman numerals (I, II, III, ..., XCVIII, XCIX, C).
tamil
Tamil numbering (௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).
telugu
Telugu numbering (౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).
thai
Thai (Siamese) numbering (๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).
tibetan
Tibetan numbering (༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).
alphabetic
Interprets the list of counter symbols as digits to an alphabetic numbering system.
lower-alpha
lower-latin
Lowercase ASCII letters (a, b, c, ..., z, aa, ab).
upper-alpha
upper-latin
Uppercase ASCII letters (A, B, C, ..., Z, AA, AB).
lower-greek
Lowercase classical Greek (α, β, γ, ..., ω, αα, αβ).
hiragana
Dictionary-order hiragana lettering (あ, い, う, ..., ん, ああ, あい).
hiragana-iroha
Iroha-order hiragana lettering (い, ろ, は, ..., す, いい, いろ).
katakana
Dictionary-order katakana lettering (ア, イ, ウ, ..., ン, アア, アイ).
katakana-iroha
Iroha-order katakana lettering (イ, ロ, ハ, ..., ス, イイ, イロ).
symbolic
Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list.
disc
A filled circle, similar to • U+2022 BULLET.
circle
A hollow circle, similar to ◦ U+25E6 WHITE BULLET.
square
A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.
disclosure-open
Symbol appropriate for indicating an open disclosure widget.
disclosure-closed
Symbol appropriate for indicating a closed disclosure widget.
fixed
Runs through its list of counter symbols once, then falls back.
cjk-earthly-branch
Han "Earthly Branch" ordinals (子, 丑, 寅, ..., 亥).
cjk-heavenly-stem
Han "Heavenly Stem" ordinals (甲, 乙, 丙, ..., 癸).
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> =
<length> |
<percentage><length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
none
The element has no marker string.
