How to set Roman Number as Marker for List Items?

Roman Number marker for List Items

To set roman number marker for the list items in a list using CSS, set list-style-type property for the list with the upper-roman or lower-roman value as shown in the following.

ol {
  list-style-type: upper-roman;
}
/* or */
ol {
  list-style-type: lower-roman;
}

Examples

1. Lower roman numbers as marker for list items

In the following example, we take an ordered list and specify lower-roman as list item marker for the items.

index.html

2. Upper roman numbers as marker for list items

In the following example, we take an ordered list and specify upper-roman as list item marker for the items.

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS list-style-type property to set roman numbers as marker for list items, with examples.