CSS box-decoration-break ominaisuus

Definition and usage

The box-decoration-break property specifies how the element's background, padding, border, border-image, box-shadow, margin, and clip-path are applied when the element's box is segmented.

Example

Define the box-decoration-break property:

span.ex1 { 
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
span.ex2 { 
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}

Try it yourself

CSS syntax

box-decoration-break: slice|clone|initial|inherit|unset;

Attribute value

Value Description
slice Default. Box decoration is applied to the element as a whole and breaks at the edges of the element segments.
clone

Box decoration is applied to each segment of the element, as if each segment were a single element.

The four edges of each segment of the border wrapping the element are wrapped, and the background of each segment is redrawn completely.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: slice
Inheritance: No
Animation production: Not supported. See:Animation-related properties.
Version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Follow the first version of the prefix defined by -webkit- before using the numerical specification.

Chrome IE / Edge Firefox Safari Opera
22.0 -webkit- 79.0 32.0 6.1 -webkit- 11.5 -webkit-