box-decoration-break | CSS CSS Properties

Controls how an element's fragments (like when a line of text wraps or breaks across pages) are styled. 'Clone' repeats the padding and borders on every fragment, while 'slice' cuts them off.

Quick example

span.highlight {
  background: linear-gradient(to right, #7c3aed, #ec4899);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  /* standard 'slice' (default) cuts borders/padding at line breaks */
  /* 'clone' ensures every line fragment gets the background and padding */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Quick facts

Initial value

slice

Inherited

Applies to

all elements

Animation type

discrete

Values

sliceclone

box-decoration-break Browser Support

Limited availability 86% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

130+

32+

130+