Codestin Search App

CSS text-transform Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-transform property controls how letters are presented in the rendered output by applying standardized case mappings and related character transformations. It works at the rendering layer: the visible glyphs can be converted according to Unicode case and width mappings without changing the underlying DOM text nodes. Because it is a presentation-level change, authors should not rely on it to alter semantic content — for example, scripts that query or manipulate text programmatically will still see the original casing in most cases, and assistive technologies or copy/paste behavior may expose either the original or transformed form depending on the user agent.

Because the property changes the actual characters used for rendering, it can affect layout and typographic metrics. Converted characters can have different widths, kerning, or shaping behavior, so applying transformations may change line breaks, overflow, and alignment compared with the untransformed text. That interaction means you may need to re-evaluate spacing and alignment when using this property alongside typographic controls such as letter-spacing or when selecting a particular font-family, since some fonts treat transformed glyphs (or alternate-width glyphs used for certain scripts) differently.

Internationalization and accessibility are important considerations. Case mappings are language-aware in some languages and scripts, and a naive visual transform can produce unexpected or incorrect results for names, acronyms, or language-specific case rules; when language-specific accuracy matters, prefer providing the text in the desired form in the source or marking the content with the correct lang attribute. For stylistic alternatives such as small-caps, use typographic features instead of relying on visual case conversion — for example, consider font-variant for small-caps — and remember that assistive technologies may read or expose transformed text differently, so for semantic correctness modify the underlying text rather than depending solely on visual transforms.

Definition

Initial value: none
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.textTransform

Interactive Demo

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

The RUSTY swing set creaked a lonely LuLLaby in the twilight, shadows lengthening Like grasping fiNGErs across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

text-transform: none | capitalize | uppercase | lowercase | full-width

Values

noneWill not change any text
capitalizeWill make the first letter of each word a capital letter
uppercaseWill transform all letters to uppercase
lowercaseWill transform all letters to lowercase
inherit

Example

HTML

<div class="container">

    <h1>text-transform examples</h1>

    <p class="normal">This is normal text.</p>

    <p class="uppercase">This is uppercase text.</p>

    <p class="lowercase">THIS IS LOWERCASE TEXT.</p>

    <p class="capitalize">this is capitalized text.</p>

    <p class="fullwidth">English text 123 ABC</p>

</div>

CSS

.container {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
}

h1 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

p {
    margin: 0.5rem 0;
    padding: 8px;
    border-radius: 4px;
    background: #f8f8f8;
}

.normal {
    text-transform: none;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.fullwidth {
    text-transform: full-width;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-transform property. Hover over a browser icon to see the version that first introduced support for this CSS property.