text-transform
Changes letter case: all uppercase, all lowercase, or capitalized first letters.
- Initial value
none- Inherited
- Yes
- Animatable
- no
- Applies to
- all elements
- JavaScript
element.style.textTransform = "uppercase"
Example
#.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem;
}<span class="badge box" style="display: inline-grid; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;">premium</span>Definition and usage
#The text-transform property changes how letters are displayed without changing the underlying content. uppercase turns every letter capital, lowercase turns them all lowercase, and capitalize starts each word with a capital letter.
This is a better approach than typing text in all caps directly in the HTML. Screen readers read the normal text instead of spelling it out letter by letter, and changing the style later doesn’t require touching the content.
The rules for changing letter case depend on the language set with the lang attribute. For example, in Turkish the capital of "i" is "İ", and the browser takes that into account when lang is set correctly.
Syntax
#text-transform: none | uppercase | lowercase | capitalize | full-width;Values
#- Text exactly as written in the code.
- Every letter capitalized.
- Every letter lowercase.
- Every word starting with a capital letter.
Values in practice
#none
.demo { text-transform: none; }uppercase
.demo { text-transform: uppercase; }lowercase
.demo { text-transform: lowercase; }capitalize
.demo { text-transform: capitalize; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write the content normally, and apply uppercase in CSS. Screen readers won’t spell out the words letter by letter.
- English title case usually skips small words such as
a,the, andof, socapitalize, which capitalizes every single word, rarely matches real heading style.
Related entries
#Spotted a mistake or missing an example? Write to us.