To keep padding at both ends of every wrapped highlight line, apply box-decoration-break: clone to an inline element, alongside its background and padding. Include the WebKit-prefixed declaration for Safari. MDN explains fragment decoration.

This guide is for someone editing a web page on a Mac who wants a highlighted phrase to wrap naturally inside a heading or paragraph. The task is to give each resulting line its own padded background while leaving line breaking to the browser.

Why does padding disappear where the highlight wraps?

The initial value of box-decoration-break is slice. When an inline box breaks across lines, that value treats its decoration as a continuous box sliced into fragments. Padding is not inserted at the broken edges. With clone, each fragment receives its own padding, border and background decoration. W3C defines both fragmentation behaviors.

That distinction explains a common result: adding more horizontal padding makes the beginning and end of the whole phrase roomier, but intermediate line edges still look tight. The missing setting controls what happens at those breaks; increasing the padding alone does not change it.

Keep the highlight as an inline box. A block background decorates the containing rectangle, while an inline highlight follows the text flow. MDN documents the different sizing and spacing behavior of block, inline and inline-block boxes. See MDN’s box model guide.

Create a complete example on your Mac

In a code editor, create a plain-text file named wrapped-highlight.html, paste the complete example below, and save it. Open the file in your desktop browser. No package installation, external stylesheet or JavaScript is required.

The synthetic heading represents a simple page introduction. One span surrounds the entire decorated phrase. WHATWG defines the span element as a generic text-level container with no meaning of its own, making it suitable for this purely visual grouping. Read the HTML Standard’s span definition.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Narrow the browser window until the heading wraps, then widen it again. Inspect the beginning and end of each highlighted line. The intended result is a separate padded background fragment around each line, with the same treatment continuing as the wrapping changes. MDN’s examples use the same pair of prefixed and standard declarations. See the documented syntax and examples.

The dimensions here are illustrative design choices. Start by changing the horizontal padding, 0.3em, if the ends look too tight or too wide. Change the vertical padding, 0.08em, separately. Keep the wrapping test active while adjusting either value.

To compare behaviors, temporarily change both decoration declarations from clone to slice, save, and reload. Restore both to clone afterward. Changing both avoids leaving the comparison dependent on which declaration your browser recognizes.

Which browser support details matter on a Mac?

Retain both declarations in the example. MDN’s current compatibility data records standard property support from Chrome 130 and Firefox 32. It records Safari support with the -webkit- prefix and limits that implementation to inline elements. Inspect MDN’s browser compatibility data.

That inline limitation fits this task: a phrase breaking across text lines is inline fragmentation. It does not establish equivalent support for a block fragmenting across columns or printed pages. Keep those layout cases separate when evaluating the result.

Test the file in the Mac browsers that matter for your page. Use a narrow and a wide window, then enlarge the page text and repeat. Treat the number of lines as variable; your acceptance condition is consistent padding on the fragments that each browser actually produces.

If an environment recognizes neither declaration, the per-line cloning enhancement will be unavailable. Keep the underlying text and background usable, or choose a padded block treatment if a single rectangular background meets the design requirement. That changes the appearance, so it should be an explicit design choice.

How do you prevent overlapping backgrounds and awkward wrapping?

Padding and line spacing solve different problems. On a normal inline box, top and bottom padding can extend the painted area without moving surrounding content away. Consequently, increasing vertical padding can make adjacent highlighted lines overlap. MDN explicitly documents this inline-box behavior. See inline padding and surrounding content.

Adjust the heading’s line-height together with the highlight’s vertical padding. The example uses a deliberately roomy 1.65 starting point. Reduce it gradually if the gaps feel excessive, checking the narrowest layout each time. There is no single spacing value that suits every font and decoration.

Use this diagnostic sequence to identify the cause before changing more CSS:

What you see Check first Next action
Padding exists only at the phrase’s outer ends Decoration behavior Apply both clone declarations to the highlighted inline element.
One large background rectangle Which element owns the background Put the background and padding on the inner inline span.
Highlighted lines touch vertically Vertical padding and parent line height Reduce vertical padding or increase line height.
A long label extends beyond the container Available wrapping opportunities Consider the optional long-token rule below.
Only Safari lacks the intended end padding Prefixed declaration Confirm that -webkit-box-decoration-break: clone remains in the stylesheet.

For an otherwise unbreakable synthetic label such as AmberTileSequenceAmberTileSequence, you can add overflow-wrap: anywhere to .sample-title. This is an optional CSS fragment to add inside the existing rule; the rest of the example stays the same.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

This permits an otherwise unbreakable string to break when needed to prevent overflow, without inserting a hyphen. It addresses wrapping opportunities; it does not create padding. Ordinary phrases with spaces may not need it. MDN documents the conditions for overflow-wrap.

Also consider the background itself. With clone, backgrounds are drawn independently for each fragment, so a gradient or background image can restart on each line. Use a solid color when you want a uniform highlight without a repeated image pattern. W3C describes independent fragment backgrounds.

Preserve natural text flow and shaping boundaries

Use one wrapper around the complete intended phrase rather than manufacturing separate wrappers for today’s visible lines. That keeps the markup independent of the current window width and font choice.

Avoid splitting a word into padded character spans to simulate the effect. The CSS Text specification requires shaping to break across inline boundaries when nonzero inline-axis padding, borders or margins separate adjacent typographic character units. A padded boundary inside a word can therefore affect glyph shaping. See W3C’s shaping-across-boundaries rules.

For this heading, place the wrapper at the phrase boundaries and leave its internal text continuous. The practical benefit is that you avoid introducing additional padded boundaries inside the phrase. This does not promise identical glyphs or line endings across browsers and fonts; inspect the actual rendering you intend to use.

What if the project uses Tailwind CSS?

In an existing Tailwind project, add box-decoration-clone to the inline element that already owns the highlight background and padding. Tailwind’s current documentation maps that utility to box-decoration-break: clone. Its box-decoration-slice utility selects the other behavior. See Tailwind’s box-decoration-break utilities.

Keep the browser requirement from the plain-CSS example: inspect the generated stylesheet for the prefixed declaration where Safari support is needed, and add it through the project’s custom CSS if absent. The utility selects decoration behavior; it does not remove browser implementation boundaries.

There is no need to introduce Tailwind solely for this effect. The complete local example already contains the necessary CSS.

Can a custom highlight use the same padding?

A CSS Custom Highlight API range styled through ::highlight() has different capabilities from a styled inline element. MDN lists its allowed properties, including text color, background color and text decorations. Padding and box-decoration-break are outside that allowed set. Read the documented custom-highlight styling limits.

If you control the markup and need real padding on each wrapped line, use an inline wrapper as shown above. If you must retain range-based highlighting without wrappers, use its supported color and decoration properties and accept that this API does not provide padded fragment boxes.

For a wrapped page heading or phrase, keep one inline wrapper, put its background and padding together, and apply both clone declarations. Finish by testing different widths and checking vertical spacing. Those checks establish whether the highlight works with the actual text flow, rather than only at one convenient window size.

Sources