text-transform (CSS property)

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

Syntax

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

Description

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

Example

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;
}

Value

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
lowercase
transforms all characters to lowercase
none
produces no capitalization effect at all
uppercase
transforms all characters to uppercase

Compatibility

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