The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.


Initial value none
Applies to all elements. It also applies to ::first-letter and ::first-line.


text-transform:: uppercase;


Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories This is an experimental API that should not be used in production code. ; thus, any punctuation marks or symbols at the beginning of a word are ignored. Authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in English). The capitalize keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.
Is a keyword that converts all characters to uppercase.
Is a keyword that converts all characters to lowercase.
Is a keyword that prevents the case of all characters from being changed.
Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).
Generally used for annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.

Browser support


We use cookies to improve your experience. Learn more in our Privacy policy.