Design custom text underlines using text-decoration, border-bottom, and background-image techniques.
Shape an underline by choosing among three distinct CSS approaches: native text decoration, a bottom border, or a positioned background image. Each approach controls a different part of the result. Text decoration follows the text, border-bottom follows the element box, and background-image can form a custom stripe or pattern. The common surprise is that these methods are not interchangeable: the same thickness and offset values can produce visibly different lines, especially when text wraps or uses another font.
The text-decoration approach describes the line with decoration-specific properties such as line type, color, style, and thickness. text-underline-offset can move an underline away from the text without adding padding. This approach remains tied to glyph rendering, so its exact position can vary with the selected font and the browser's handling of underline metrics.
A border-bottom underline is drawn at the bottom edge of the styled element's box, making padding part of the distance between text and line. A background-image underline is painted as a background, where background size, position, and repetition can create a stripe, gradient, or repeating pattern. These alternatives are decorative box effects rather than native text decorations.
Start with text-decoration when the line should behave like an underline attached to the text. It supports underline-specific thickness, offset, color, and style controls. Border-bottom is useful when the line must follow the element box. Background-image is appropriate for custom graphical effects, but no, it should not be assumed to behave like a native underline.
No. Native underline placement can reflect font metrics, while border and background positions depend on the element box and its sizing. Font substitution, line height, wrapping, zoom, and browser rendering can therefore change the apparent gap or thickness. Verify the generated style using the actual font, text sizes, states, and line lengths used by the page.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.