A practical CSS scrollbar style uses standardized properties first, then adds browser-specific selectors when you need precise control over the track, thumb, or hover state. The standard layer works across modern Firefox and Chromium-based browsers; WebKit pseudo-elements provide finer visual control where supported.

Apply the rules to the element that owns the scrolling area. Styling the scrollbar changes its appearance, not the way users scroll with a wheel, touchpad, keyboard, or touch input.

CSS scrollbar style: Start with standardized color and width

Set scrollbar-color and scrollbar-width

scrollbar-color accepts the thumb color first and the track color second. scrollbar-width supports auto, thin, and none. Use none only when another visible scrolling method is available.

Example: .scroll-panel { scrollbar-color: #52606d #e8edf2; scrollbar-width: thin; }

These properties are the preferred baseline for a scrollbar CSS style because they are standardized rather than tied to one rendering engine.

Know what Firefox and Chromium support

Firefox uses these standardized properties as its main scrollbar styling interface. Current Chromium-based browsers also support them, while older Chromium versions may require the WebKit layer below. Keep the standard declarations in your stylesheet so browsers that do not understand WebKit selectors still receive a useful color and width.

Scrollbar CSS style: Style the track and thumb with WebKit pseudo-elements

WebKit scrollbar pseudo-elements are a separate compatibility layer, not a universal cross-browser standard. They are useful in Chromium-based browsers and WebKit-based browsers such as Safari, while Firefox relies on the standardized properties.

Target the WebKit scrollbar, track, and thumb

::-webkit-scrollbar controls the scrollbar’s width and height. ::-webkit-scrollbar-track styles the channel behind the thumb, and ::-webkit-scrollbar-thumb styles the draggable control. A border on the thumb can create visual spacing between it and the track.

Example: .scroll-panel::-webkit-scrollbar { width: 12px; height: 12px; } .scroll-panel::-webkit-scrollbar-track { background: #e8edf2; } .scroll-panel::-webkit-scrollbar-thumb { background: #52606d; border: 3px solid #e8edf2; border-radius: 999px; }

Use hover styles without changing scroll behavior

Change only visual properties for interaction feedback. Example: .scroll-panel::-webkit-scrollbar-thumb:hover { background: #334e68; } This makes the thumb easier to identify without changing overflow, dimensions, or scrolling mechanics.

Custom scrollbar CSS for one overflow container

Attach rules to a named scrolling element

Give the intended container a class, then apply both standard and WebKit rules to that class. Example markup: <div class=”scroll-panel”>Long content goes here.</div>

The complete custom scrollbar CSS can be written as: .scroll-panel { max-height: 18rem; overflow: auto; scrollbar-color: #52606d #e8edf2; scrollbar-width: thin; } .scroll-panel::-webkit-scrollbar { width: 12px; height: 12px; } .scroll-panel::-webkit-scrollbar-track { background: #e8edf2; } .scroll-panel::-webkit-scrollbar-thumb { background: #52606d; border: 3px solid #e8edf2; border-radius: 999px; } .scroll-panel::-webkit-scrollbar-thumb:hover { background: #334e68; }

Keep overflow, height, and width declarations separate

The max-height and overflow: auto declarations create the scrolling area; the scrollbar rules only style it. Use overflow-x and overflow-y separately when horizontal and vertical behavior must differ. Avoid applying these selectors to * unless every scrollbar on the page should match.

HTML scrollbar styling: Build fallbacks and interaction states

Let standard rules remain the fallback

Place scrollbar-color and scrollbar-width on the scrolling element first, followed by WebKit pseudo-elements. Firefox will use the standard rules, while compatible Chromium and WebKit browsers can use the more detailed track and thumb declarations.

Test contrast, keyboard scrolling, and hover feedback

Keep the thumb visibly distinct from the track in its normal and hover states. Test long content with keyboard focus, including arrow keys, Page Up, Page Down, Home, and End. On touch devices, do not rely on hover feedback; the scrollbar should remain understandable and usable without it.

overflow: hidden clips content that extends beyond an element’s padding box. It does not remove that content from the document; it only prevents the overflowing portion from being painted outside the element.

Developers often shorten the name to overflow hidden. The valid CSS declaration is overflow: hidden, and it takes effect when the element has content that exceeds a constrained width or height. If the box can grow naturally to fit its contents, there may be nothing to clip.

What does overflow: hidden do?

The overflow property controls content that does not fit inside a box. With overflow: hidden, the browser clips the excess at the padding edge. The border remains visible, while text, child elements, backgrounds, shadows, or other painted content extending beyond that edge may be cut off.

The declaration applies to both horizontal and vertical overflow. Use overflow-x or overflow-y when only one axis should be clipped. A hidden overflow area does not display user-facing scrollbars, but the content can still exist in layout and can usually be reached by script by changing properties such as scrollTop or scrollLeft.

How does a fixed-size box show clipping?

A fixed-size box makes the effect clear because its content cannot expand the box. This example gives the element a 220-pixel outer width and an 80-pixel outer height:

CSS: .card { width: 220px; height: 80px; padding: 16px; box-sizing: border-box; overflow: hidden; }

Markup: <div class=”card”>This content is deliberately long enough to exceed the available height of the card and continue below its padding edge.</div>

Only the portion that fits inside the card is visible. The remaining text still belongs to the element, so it can affect layout calculations and remain available to browser APIs. Reducing the height or adding more content makes the clipping easier to observe.

Without a constrained height, a normal block usually expands vertically and displays all of its content. This is why overflow hidden should not be used as a universal fix for an unrelated sizing or layout defect. First establish which dimension is meant to remain constrained.

When should you choose visible, auto, scroll, or clip?

• visible: The default value. Content can paint outside the element’s box, which is useful for badges, menus, or shadows that must extend beyond their parent. It does not provide scrolling or clipping.
• hidden: Clips excess content and shows no scrollbars. It suits decorative cropping, controlled panels, and boxes where inaccessible overflow is intentional. Hidden overflow can still be scrolled programmatically.
• auto: Clips overflow and provides scrolling when the content requires it. This is usually the practical choice for a panel, log, or text region whose content must remain reachable without forcing a scrollbar when the box is short.
• scroll: Provides a scrolling mechanism even when the content currently fits. Choose it when a stable scrollbar area matters for layout or when users should immediately recognize that more content may be available.
• clip: Clips content like hidden but does not allow scrolling, including programmatic scrolling. It also does not establish a block formatting context. Use it for deliberate, permanent clipping when the overflow must not be scrollable.

How does CSS overflow: hidden affect layout and focus?

On a block container, overflow: hidden establishes a block formatting context. This changes how the element interacts with floats and margin collapsing and can contain floated descendants within the box. The same formatting-context behavior is also associated with values such as auto and scroll, but not clip. If clipping and a formatting context are both needed with clip, use an explicit layout value such as display: flow-root.

Clipping does not equal removal. A clipped descendant remains in the DOM and may still be focusable. A keyboard user could tab to a link or form control positioned outside the visible area, while its focus outline is clipped or difficult to see. Do not assume that hidden overflow removes an item from the tab order or makes it inaccessible to scripts.

For interactive content that must remain reachable, use auto or a layout that keeps the control visible. Reserve hidden for content that is intentionally cropped, and test focus movement, keyboard navigation, and responsive dimensions whenever descendants can extend beyond the padding box.

CSS white-space controls whether the browser collapses runs of HTML white space, preserves source line breaks, and wraps text at the edge of its container. The main choices are normal, nowrap, pre, pre-wrap, and pre-line.

Use the same sample to predict each result. The source contains two spaces between “Alpha” and “Beta,” followed by a source line break before “Gamma.”

What Does CSS white-space Do to a Text Sample?

The white-space property changes two related behaviors: how sequences of spaces and line breaks are rendered, and whether the browser may wrap text onto another line. It does not add visual spacing as a layout technique; it defines how existing text whitespace is interpreted.

Use this sample source throughout:

Sample source: Alpha Beta
Gamma

With the default behavior, the browser renders the sample as one space between “Alpha” and “Beta,” and the source line break does not create a new rendered line. Other values can preserve the two spaces, preserve the line break, prevent wrapping, or combine those behaviors.

How Does HTML white space Collapse by Default?

In ordinary HTML flow, adjacent spaces, tabs, and source line breaks are treated as collapsible whitespace. A sequence of these characters usually becomes one rendered space. Whitespace at the beginning or end of a line can also disappear.

That means this source:

Alpha Beta
Gamma

normally displays as “Alpha Beta Gamma.” The newline in the HTML source is not the same as an explicit line break element. To force a break in ordinary text, use an intentional break or a CSS value that preserves line breaks.

Wrapping is separate from collapsing. Even after several whitespace characters become one space, the browser can wrap the resulting text when the containing element is too narrow. The normal value enables both collapsing and wrapping.

When Should You Use white-space nowrap?

Use white-space nowrap when text must stay on one line, such as a compact navigation label, status badge, button caption, or table-cell value. The declaration is white-space: nowrap;.

nowrap collapses spaces and source line breaks like normal, but it prevents automatic wrapping. The sample therefore remains “Alpha Beta Gamma” on one line rather than breaking between words when the container narrows.

Preventing wrapping can cause overflow. A long label, URL, or generated value may extend beyond its container, become clipped, create horizontal scrolling, or push against adjacent content, depending on the element’s overflow rules. Check narrow screens and translated text before applying it broadly. If content must remain readable, allow wrapping or add a deliberate overflow strategy instead of hiding the excess.

How Does the white-space property Compare These Values: normal, nowrap, pre, pre-wrap, and pre-line?

These values produce predictable differences with the same sample:

• normal: Collapses repeated spaces and source line breaks, then allows wrapping. The sample becomes “Alpha Beta Gamma.”
• nowrap: Collapses repeated spaces and source line breaks, but prevents automatic wrapping. The sample stays on one line.
• pre: Preserves repeated spaces and line breaks, but prevents wrapping. The two-space gap remains, the break before “Gamma” remains, and long lines can overflow.
• pre-wrap: Preserves repeated spaces and line breaks while allowing wrapping. This keeps the sample’s formatting but lets long content move to additional lines.
• pre-line: Collapses repeated spaces but preserves source line breaks and allows wrapping. The gap becomes one space, while “Gamma” starts on its own line.

Choose normal for typical paragraphs, nowrap for short one-line UI text, pre for faithfully formatted content that may overflow, pre-wrap for formatted content that must remain readable in narrow containers, and pre-line when line breaks matter but repeated spacing does not.

Use one base rule for CSS links, then add state selectors and decoration changes in a deliberate order. This CSS link underline approach keeps links recognizable while allowing hover, keyboard focus, and activation to provide distinct feedback.

The most reliable pattern preserves an underline by default, changes color for visited and interactive states, and uses a visible outline for keyboard focus.

Style CSS links by default with a working rule set

Start with the a selector so every link receives a consistent baseline. The :link selector then targets unvisited links, while :visited provides a separate history-based color.

a { color: #1455cc; text-decoration-line: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; text-decoration-color: currentColor; }

a:link { color: #1455cc; }

a:visited { color: #6b3fa0; }

a:hover { color: #0b6b52; text-decoration-thickness: 0.16em; }

a:active { color: #a33a00; }

a:focus-visible { color: #1455cc; outline: 3px solid #b54708; outline-offset: 3px; text-decoration-thickness: 0.18em; }

These rules assume links have an href attribute. The base rule establishes the default appearance, and each later state can adjust only the properties needed for that interaction.

Apply CSS link states in the right order

CSS link states can overlap. A link may be visited and hovered at the same time, or focused and briefly active during keyboard activation. When selectors have equal specificity, the later declaration wins for the same property.

• :link styles an unvisited link.
• :visited styles a link whose destination appears in the browser’s history.
• :hover applies while a pointer rests over the link. It is not a dependable touch interaction.
• :active applies during the moment the link is being activated.
• :focus-visible applies when the browser determines that focus should be visibly indicated, especially for keyboard navigation.

Place the base a rule first, followed by :link, :visited, :hover, :active, and :focus-visible. Putting :focus-visible last lets the keyboard-focus treatment remain visible when another state also matches. This order is more important when several rules set the same color, underline thickness, or other property.

Customize a CSS link underline with text-decoration

A CSS link underline is controlled most precisely with separate text-decoration properties rather than a single shorthand declaration. The working rule uses these four controls:

• text-decoration-line: underline adds the line. Use none only when another strong link cue remains.
• text-decoration-thickness: 0.12em sets the line weight relative to the link’s font size.
• text-underline-offset: 0.18em creates space between the glyphs and the line, improving clarity.
• text-decoration-color: currentColor makes the underline follow the link’s current text color.

Use a separate decoration color when the design needs stronger contrast between text and underline. For example, text-decoration-color: #b54708 can make a CSS underline link more noticeable without changing its text color. Keep the underline on ordinary inline links; removing it everywhere makes links harder to distinguish from surrounding copy.

Keep underlines in CSS links distinct for hover and keyboard focus

Hover and keyboard focus serve different users, so do not treat them as interchangeable CSS link states. A thicker underline or color shift works well for pointer hover. Keyboard users need a persistent, high-contrast focus indicator that does not depend on pointer position.

Keep the default underline during focus and add an outline with outline and outline-offset. The outline sits outside the text and remains easy to see against varied backgrounds. Do not replace it with a subtle color change alone, and do not write outline: none without providing an equally clear alternative.

Because :focus-visible follows :active in the rule set, its outline and thickness remain available when a keyboard user activates the link. The result is a CSS underline link that stays recognizable at rest, responds clearly to hover, and preserves visible keyboard focus.

Use the text-transform CSS property to change how text appears without editing the text in your HTML. Its main values are uppercase, lowercase, capitalize, and none.

Choose uppercase for labels or controls that should display every letter in capitals. Choose capitalize when each word should begin with a capital letter. The choice changes presentation only; it does not rewrite the underlying text.

How do you make text uppercase with CSS?

To make text uppercase with CSS, apply text-transform: uppercase to the target element:

.button-label { text-transform: uppercase; }

If the HTML contains Submit application, the browser displays SUBMIT APPLICATION. The rule affects letters in the rendered content, including text inside headings, links, buttons, and other elements.

You can apply the rule to a reusable class:

.all-caps {
text-transform: uppercase;
}

Then add that class to any element that needs the same treatment. This approach keeps the source text readable and avoids typing duplicate all-capital versions into your HTML.

What does text-transform: capitalize do?

The text-transform: capitalize value capitalizes the first letter of each word:

.title { text-transform: capitalize; }

The source text monthly design report appears as Monthly Design Report. Capitalize is different from uppercase: it does not convert an entire string to uppercase.

It also does not necessarily create perfect editorial title case. For example, a source value such as MONTHLY design report may display as MONTHLY Design Report, because the property targets word initials rather than first lowercasing the rest of the string. If your content requires a specific style for acronyms, short words, or mixed-case names, provide that casing in the source text or transform it with application logic.

How do lowercase, none, and inheritance work?

Use lowercase when every displayed letter should be small:

.email { text-transform: lowercase; }

For example, [email protected] displays as [email protected]. To remove a transformation from an element, use none:

.plain-text { text-transform: none; }

text-transform is inherited. A parent rule can therefore affect descendants even when those child elements have no text-transform declaration:

.card { text-transform: uppercase; }

Every text element inside .card can display in uppercase. Override that inherited value on a child by declaring another value:

.card .description { text-transform: none; }

The description then uses its normal source casing while other card content remains uppercase. If the override does not work, check whether another selector has greater specificity or whether a later rule wins in the cascade.

Does text-transform change the original text value?

No. CSS text transformation changes rendering, not the stored string. If the HTML contains Download report, the browser can display DOWNLOAD REPORT with text-transform: uppercase, but the text node still contains Download report.

This distinction matters for links, accessibility, scripts, and forms. JavaScript reading an element’s text still receives the original value, and a form submits the input’s actual value rather than its visually transformed version. An input styled with text-transform: uppercase may look like ABC123 while its value remains the characters the user entered.

Use CSS for visual consistency. Change the underlying string separately when the stored or submitted casing must also change.