The text-transform property in CSS controls text case and capitalization.

.lowercase {
  text-transform: lowercase;

Text-Transform Values

  • lowercase makes all of the letters in the selected text lowercase.
  • uppercase makes all of the letters in the selected text uppercase.
  • capitalize capitalizes the first letter of each word in the selected text.
  • none leaves the text's case and capitalization exactly as it was entered.
  • inherit gives the text the case and capitalization of its parent.

The demo below shows lowercase, uppercase, and capitalize in use. Take a look at the HTML tab to see how the text was originally written, then switch back to the results tab to see it after the CSS is applied.

See the Pen 0f4293fce0d14aafc3818c950ab0ded3 by mariemosley (@mariemosley) on CodePen.

Points of Interest

capitalize will capitalize words that appear inside single or double quotes, and the first letter after a hyphen. It won't capitalize the first letter after a number, so dates like "February 4th, 2015" won't transform into "February 4Th, 2015".

capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that's in all capital letters already, the other letters in the word won't switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn't include any lowercase letters.

CSS can't do "title case", the capitalization style used in titles of books, movies, songs, and poems, where articles are lowercase (as in "Raiders of the Lost Ark"). But, there are JavaScript solutions for title case, including David Gouch's toTitleCase().

Related Properties

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Firefox supports language-specific capitalization rules for Turkic languages, German, Dutch, and Greek that are not supported by other browsers. Firefox is also the only browser that supports text-transform: full-width;, which can help improve the readability of text that includes a mixture of latin and East Asian scripts. See details at MDN.


  1. mickmackusa
    Permalink to comment#

    I just want to offer a warning when combining text-transform and a case-sensitive validation pattern.

    For example:
    <input type="input" style="text-transform:uppercase;" pattern="^[AP]M$">

    The pattern seems to validate the keyed value rather than the visible value. If I type “am” into the input, I see “AM”, but the pattern is not matched.

    The solution is to use a case-insensitive pattern.
    <input type="input" style="text-transform:uppercase;" pattern="^[AaPp][Mm]$">

    • mickmackusa
      Permalink to comment#

      correction… the (unwanted) lowercase value is still submitted in the form. As “style” suggests, it is only the visual and not the actual value being passed.

  2. Joe
    Permalink to comment#

    If content is put in with all CAPS, and the front-end should be Capitalized, using capitalize won’t work, as Chris points out. How can all caps be changed into capitalized words with CSS, and without going into the CMS and changing the text? I tried wrapping the text in a parent span, lowercasing that, than capitalizing the child span, but that didn’t work for obvious reasons – but it was one of those ‘might as well try it’ ideas.

  3. Karthik
    Permalink to comment#

    @JOE, I have a similar issue as yours. The input data is all caps which I convert into camel case/title case using the CSS text-transform:capitalize after converting them to lowercase. But the issue now is, few abbreviations and acronyms such as “US” or “U.S”, also go through this transformation. This needs to be avoided. Any ideas or suggestions?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.