text-transform (CSS property)

Inherited Initial Version
Yes none CSS1, 2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Buggy Full Buggy


text-transform: { capitalize | lowercase | none | uppercase | inherit } ;


This property controls if and how an element’s text content is capitalized.


These style rules make h1 headings use only uppercase letters, while the first letter of each word in h2 headings will be uppercased:

h1 {
  text-transform: uppercase;
h2 {
  text-transform: capitalize;


transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document
transforms all characters to lowercase
produces no capitalization effect at all
transforms all characters to uppercase


Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full Buggy Buggy Buggy Buggy Full Full Full Buggy

Note that the concept of what constitutes a word depends on the language in which the content is presented, and differs between browsers. Opera and Firefox will capitalize text-transform as Text-transform, while Internet Explorer for Windows will capitalize it as Text-Transform.

In Internet Explorer for Windows versions up to and including 7, the values lowercase and uppercase behave like none if the font-variant property is set to small-caps.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Safari up to and including Version 4 and Chrome up to and including version 3, all ignore text-transform when applied via the :first-line pseudo element.

Safari up to and including version 3.0 do not apply text-transform to input elements. Versions 3.1 and 4 do not exhibit this problem.

User-contributed notes

Related Products