CSS Property text-transform

text-transform changes the case of letters in an element.


Initial value none
Inherited Yes.
Version CSS1
JavaScript syntax object.style.textTransform="uppercase"
Applies to All elements.

CSS Syntax

text-transform: capitalize | lowercase | none | uppercase

Property Values

The property values are listed in the following table.

Value Description
none No capitalization. Default value
capitalize uppercase the first character of each word
uppercase uppercase all characters
lowercase lowercase all characters
inherit inherit the text-transform property from the parent element

Browser compatibility

text-transform Yes Yes Yes Yes Yes


An example showing how to use text-transform CSS property.

p {<!-- w  w w.  ja  va 2  s .c  om-->
    padding: 5px 25px;
    background: mistyrose;
    border: 1px solid orange;
span.lower {
    text-transform: lowercase;
span.upper {
    text-transform: uppercase;
span.capitalize {
    text-transform: capitalize;
span.example {
    background: pink;
   <span class='lower example'>UPPERCASE TEXT LOWERCASE</span> 
   <span class='upper example'>lowercase text uppercase</span>
   <span class='capitalize example'>capitalize every word.</span>.

Click to view the demo