Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

  1. Home
  2. CSS Dictionary
  3. text-transform

text-transform

Specifies the capitalization of text such as alphabetic characters.

Sample Code

p.test { text-transform: none;}
p.test1 { text-transform: lowercase;}
p.test2 { text-transform: uppercase;}
p.test3 { text-transform: capitalize;}

Available Values

ValueDescription
noneDisplays the text exactly as entered. This 'none' is the initial value.
lowercaseDisplays all text in lowercase.
uppercaseDisplays all text in uppercase.
capitalizeDisplays the first letter of each word in uppercase.

Browser Display Result

<p style="text-transform: none;">This is a p element. this is a pen.</p>

<p style="text-transform: lowercase;">This is a p element. this is a pen.</p>

<p style="text-transform: uppercase;">This is a p element. this is a pen.</p>

<p style="text-transform: capitalize;">This is a p element. this is a pen.</p>

Browser Compatibility

Chrome Chrome
1+
Firefox Firefox
1+
Safari Safari
1+
Edge Edge
12+
Supported in all versions
IE IE
11
10
9
8
7
6
Opera Opera
7+
6 and earlier ×
iOS Safari iOS Safari
1+
Android Android Browser
4.4+
3 and earlier ×
Chrome Android Chrome Android
Latest
Same support as desktop
Firefox Android Firefox Android
Latest
Same support as desktop

※ Version data is based on MDN.

Details

Specifies the capitalization of text such as alphabetic characters.

Languages such as Japanese do not have the concept of uppercase and lowercase, so specifying this property on Japanese text will have no effect. Please be aware of this.

If you find any errors or copyright issues, please .