Box-decoration-break - CSS Property
Summary of characteristics of the box-decoration-break property
slice | clonesliceDiscrète: during an animation, the box-decoration-break property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax diagram of box-decoration-break.
Description of the box-decoration-break property.
box-decoration-break defines how decoration properties (background, borders, etc.) are handled when elements are broken across multiple
columns or multiple lines. When printing, the breaking can occur from one page to another.
Decorating properties include the border, outer and inner margins, the background, and any clipping (clip).
- First case: fragmented elements over several lines. Only borders and inner margins (padding) are affected.
- Second case: elements broken up across several columns or pages. This includes borders, background images, and inner margins.
A little example of the effect of box-decoration-break will be more clear:
a red border
and is broken over several lines
with the
slice option.box-decoration-break:slice:
a red border
and is split over several lines
with the
clone option.box-decoration-break:clone;
Values for box-decoration-break.
- box-decoration-break: slice;
Default value. The different fragments are treated as a single element. For example, the top margin is applied only to the first fragment; the bottom margin only to the last fragment. Borders enclose the different fragments as if they were a single element.
Element split over several lines.box-decoration-break:slice; - box-decoration-break: clone;
Each of the fragments is treated as a separate element. Margins are applied to each of the fragments, and borders separately surround each of the fragments.
Element split over several lines.box-decoration-break:clone; - box-decoration-break: initial; (
slice) box-decoration-break: inherit; box-decoration-break: revert; box-decoration-break: revert-layer; box-decoration-break: revert-rule; box-decoration-break: unset;Links to the presentation of these different values:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the box-decoration-break property.
Browsers are able to animate the property box-decoration-break by switching from one value to another without any transition
(which is normal since these aren't numerical values).
If your browser is able to animate
box-decoration-break, you should see the animation effect on the border and the rounded corners.
Access the box-decoration-break property via a program
With Javascript, change the value of box-decoration-break.
In JavaScript, here's how to change the value of box-decoration-break. You can see that JavaScript offers a syntax using the kebab-case
notation typical of CSS, and another syntax in camel-case, more common in JavaScript.
let el = document.getElementById('id');
el.style['box-decoration-break'] = 'slice';
// or
let el = document.getElementById('id');
el.style.boxDecorationBreak = 'slice';
With Javascript, read the value of box-decoration-break.
This code works if the property has been applied directly to the element itself using its style attribute, and not through a
CSS selector.
let el = document.getElementById('id');
let value = el.style['box-decoration-break'];
// or
let el = document.getElementById('id');
let value = el.style.boxDecorationBreak;
With Javascript, read the computed value of box-decoration-break.
The computed value is the one that results from the chain of inheritances. If no value is defined or inherited, the calculated value is the
initial value of the property {i.e., slice in the case of box-decoration-break).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('box-decoration-break');
With JQuery, read or change the value of box-decoration-break.
jQuery allows the same operations as JavaScript with a shorter syntax. Here's how to read or write the property box-decoration-break.
// Read the value:
$('#id').prop('box-decoration-break');
// Write the value:
$('#id').prop('box-decoration-break', 'slice');
$('#id').prop('{box-decoration-break': 'slice'});
With JQuery, read the computed value of box-decoration-break.
let value = $('#id').css('box-decoration-break');
Other examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself..
The buttons below apply the entered value to the property box-decoration-break and then display either the value as it was applied or the
computed value. In the case of box-decoration-break, it doesn't make a difference because the property only accepts predefined values.
Simulator.
This simulator illustrates how the box-decoration-break property works in three different scenarios:
- On a span element split across multiple lines.
- On a div element with a border and split into two columns.
- On a div element with a background image, split into two columns.
box-decoration-breakon an element of type
inlinesplit over several lines.
box-decoration-break on an element of type block split into two columns.
The effect is visible on the border and on the rounded corners.
box-decoration-break property.You can see this clearly in this example: the second column either continues the image (with the
slice value) or repeats
the image from the beginning (with clone).
Browsers compatibility with box-decoration-break.
This property is now pretty well supported by all browsers. You can still double up the syntax with the -webkit- prefix
to improve compatibility, though.
box-decoration-break.Notes:
(1) Partial support: Does not work when breaking columns or pages.
box-decoration-breakproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Samsung Internet
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the box-decoration-break property.
-
CSS Fragmentation Module Level 3
Regardingbox-decoration-breakIntroduction of this module specific to fragmentation.
Introducing thebox-decoration-breakproperty.
February 28, 2012Working Draft.
January 14, 2016Candidate Recommendation.
-
CSS Fragmentation Module Level 4
Regardingbox-decoration-breakNo change tobox-decoration-breakproperty.December 18, 2018Working Draft.
See also, about fragmentations.
The module CSS Fragmentation Module produced by the W3C defines what concerns the fragmentation of elements, that is to say the following properties:
Properties:
