Michael Gearon

CSS Text Transform – text-transform property

Michael Gearon

Last updated on

text-transform syntax

The CSS text-transform property allows you to control the text case. By default the value is none. The text can be transformed to be all-lowercase, all-uppercase or captialise the first letter of each word.

  • Default value: none
  • Applies to: all elements
  • Inherited: yes
  • Animatable: no
  • Version: CSS 1, 2 and 3

Code examples

h1.uppercase { text-transform: uppercase; }
h1.lowercase{ text-transform: lowercase; }
h1.capitalize{ text-transform: capitalize; }

Property values

  • none – the default option, no capitalization is applied, it renders as is
  • capitalize – the first character of each word is uppercased
  • uppercase – all characters are transformed to uppercase
  • lowercase – transforms all characters to lowercase
  • initial – reverts the property to its default value
  • inherit – takes the value from its parent element

text-transform syntax

text-transform: none|initial|inherit|lowercase|uppercase|capitalize

Browser support

The text-transfrom property is supported in all browsers. It has been supported since CSS 1.

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 3+
  • Safari 1+
  • Opera 3.5+

Further reading

First published on

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects