Home Menu

list-style

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.

Examples

image | image

image | none

position | inside

position | outside

type | alphabetic | hiragana

type | alphabetic | hiragana-iroha

type | alphabetic | katakana

type | alphabetic | katakana-iroha

type | alphabetic | lower-alpha

type | alphabetic | lower-greek

type | alphabetic | lower-latin

type | alphabetic | upper-alpha

type | alphabetic | upper-latin

type | counter-style-name

type | fixed | cjk-earthly-branch

type | fixed | cjk-heavenly-stem

type | none

type | numeric | arabic-indic

type | numeric | armenian

type | numeric | bengali

type | numeric | cambodian

type | numeric | cjk-decimal

type | numeric | decimal

type | numeric | decimal-leading-zero

type | numeric | devanagari

type | numeric | georgian

type | numeric | gujarati

type | numeric | gurmukhi

type | numeric | hebrew

type | numeric | kannada

type | numeric | khmer

type | numeric | lao

type | numeric | lower-armenian

type | numeric | lower-roman

type | numeric | malayalam

type | numeric | mongolian

type | numeric | myanmar

type | numeric | oriya

type | numeric | persian

type | numeric | tamil

type | numeric | telugu

type | numeric | thai

type | numeric | tibetan

type | numeric | upper-armenian

type | numeric | upper-roman

type | string

type | symbolic | circle

type | symbolic | disc

type | symbolic | disclosure-closed

type | symbolic | disclosure-open

type | symbolic | square

JS | image

JS | position

JS | type

Internal

list-style-image

list-style-position

list-style-type

External

World Wide Web Consortium (W3C)

JesusBible
HTMLCSSJSPHPSVGMore
AboutTerms