Text-transform property
Last updated: 2026-09-13
text-transform Text-transform property
The text-transform CSS property changes how text is displayed in terms of case — uppercase, lowercase, or capitalized — without modifying the underlying content. The original text in the HTML remains untouched, so screen readers and copied text are unaffected; the conversion is purely visual.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
text-transform: none | capitalize | uppercase | lowercase | full-width;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | capitalize | uppercase | lowercase | full-width | Keyword | Text case transformation values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-transform | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： capitalize uppercases the first letter of each word, but has no effect on scripts such as Chinese or Japanese that have no case distinction.
Warning： uppercase applies special case rules in some languages (Greek, Turkish), so the result may differ from what you expect.
❓ FAQ
QDoes text-transform change the actual text content in the DOM?
ANo. It only affects the visual rendering; the text in the DOM and the source stays unchanged, and users typically copy the original text. It is great for consistent uppercase headings and button label formatting.
QWhat is the full-width value of the text-transform property used for?
AIt converts half-width characters (Latin letters, digits, punctuation) into their full-width forms so Western characters align evenly within Chinese paragraphs. It is commonly used in Japanese and Chinese typography and does not affect characters that are already full-width, such as Hanzi.
QWhy does the capitalize value have no effect on Chinese text?
Acapitalize only uppercases the first letter of each word, and Chinese has neither words nor a case concept, so nothing changes; in mixed text only the English part is affected. Also, languages like Greek and Turkish have special case rules, so results can differ from expectations.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
