CSS text-transform Property

The text-transform property specifies the casing of the font.

Options include none, uppercase, lowercase, and capitalized.

Example

#

This text is transformed to uppercase.

This text displays in capital letters

<p style="text-transform: uppercase">
  This text displays in capital letters
</p>

Using text-transform

The text-transform property specifies the capitalization of text.

Text can be uppercase, lowercase, or capitalized.

Tip: If you know that your text is always lowercase, uppercase, or capitalized, then it is best to hardcode that inside the page, and not have the browser do extra work for each page that is loaded.

Syntax

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

Values

#

Value Description
none Default. Displays text as it is.
capitalize Each first letter of the word are capitalized.
uppercase All text are capitalized.
lowercase All text are set to small letters.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different text-transform values.

The casing of this text is set with the text-transform property

<style>
  .text-transform-example {
    text-transform: lowercase;
  }
</style>

<p class="text-transform-example">
  The casing of this text is set
  with the text-transform property
</p>

Browser support

This table shows when text-transform support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides