{"id":203655,"date":"2015-06-15T09:14:15","date_gmt":"2015-06-15T16:14:15","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=203655"},"modified":"2019-01-08T14:31:06","modified_gmt":"2019-01-08T21:31:06","slug":"box-decoration-break","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-decoration-break\/","title":{"rendered":"box-decoration-break"},"content":{"rendered":"<p>The <code>box-decoration-break<\/code> property lets you control how box decorations are drawn across the fragments of a &#8220;broken&#8221; element. An element can break into fragments at the end of a line, over columns, or at page breaks. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  box-decoration-break: clone;\r\n}<\/code><\/pre>\n<p>The box decoration properties controlled by <code>box-decoration-break<\/code> are: <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/\">background<\/a><\/code> (and its sub-properties), <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\">border<\/a><\/code>, <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-radius\/\">border-radius<\/a><\/code>, <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image\/\">border-image<\/a><\/code>, <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-shadow\/\">box-shadow<\/a><\/code>, <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/\">margin<\/a><\/code>, and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/\">padding<\/a><\/code>.<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>slice<\/code>: the initial value. Box decorations apply to the element as a whole and break at the edges of the element fragments.<\/li>\n<li><code>clone<\/code>: decorations apply to each fragment of the element as if the fragments were unbroken, individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment.<\/li>\n<\/ul>\n<h3>Usage<\/h3>\n<p><code>box-decoration-break<\/code> can help maintain a consistent design among the fragments of a broken element.<\/p>\n<p>In this example image, a paragraph with an orange border and a 1em top margin is broken across two columns. The top paragraph has the initial <code>box-decoration-break<\/code> value of <code>slice<\/code>. The bottom paragraph has the <code>clone<\/code> value. <\/p>\n<figure id='post-203668' class='align-none media-203668'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/box-decoration-break-columns.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>In the top paragraph, the border is sliced at the column break, and the top margin applies to the first fragment only. On the bottom paragraph, the border is drawn around all four edges of both fragments of the paragraph. The margin is also applied to each fragment. <\/p>\n<p>Another common case is inline text that breaks into multiple lines. Styles applied to those can look weird\/bad unless you <code>clone<\/code> the styles:<\/p>\n<figure id='post-203773' class='align-right media-203773'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/clone.gif' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p><a href=\"https:\/\/css-tricks.com\/multi-line-padded-text\/\">Article<\/a> and <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/JdyWPr\" rel=\"noopener\">demo<\/a> of that.<\/p>\n<h3>Demo<\/h3>\n<p>The <code>box-decoration-break<\/code> property has limited browser support. This demo works best in Firefox 37+, where <code>box-decoration-break<\/code> is fully supported.<\/p>\n<p data-height=\"550\" style=\"height: 550px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"1074b03653ffb32b88a6f88823c3de34\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/1074b03653ffb32b88a6f88823c3de34\/\" rel=\"noopener\">1074b03653ffb32b88a6f88823c3de34<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<p>At the time of this writing only Firefox fully supports <code>box-decoration-break<\/code>. Webkit browsers and Opera partially support <code>box-decoration-break<\/code> on inline elements across line breaks, but not across column or page breaks.<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep-nope\">31*<\/td>\n<td data-browser-name=\"Safari\" class=\"yep-nope\">7*<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">37<\/td>\n<td data-browser-name=\"Opera\" class=\"yep-nope\">29*<\/td>\n<td data-browser-name=\"IE\" class=\"nope\">None<\/td>\n<td data-browser-name=\"Android\" class=\"yep-nope\">4.4*<\/td>\n<td data-browser-name=\"iOS\" class=\"yep-nope\">7.1*<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>* partial support with <code>-webkit<\/code> prefix. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The box-decoration-break property lets you control how box decorations are drawn across the fragments of a &#8220;broken&#8221; element. An element can break into fragments at the end of a line, over columns, or at page breaks. .module { box-decoration-break: clone; } The box decoration properties controlled by box-decoration-break are: background (and its sub-properties), border, border-radius, [&hellip;]<\/p>\n","protected":false},"author":33562,"featured_media":0,"parent":13913,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1417],"acf":[],"jetpack-related-posts":[{"id":198601,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","url_meta":{"origin":203655,"position":0},"title":"text-decoration-skip","date":"March 31, 2015","format":false,"excerpt":"The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here's one example: a { text-decoration-skip: ink; } Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324740,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","url_meta":{"origin":203655,"position":1},"title":"mask-origin","date":"October 29, 2020","format":false,"excerpt":"The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it's the edge of the border, padding or content box. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-origin: content-box; } For elements rendered as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":203655,"position":2},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":203655,"position":3},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311020,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","url_meta":{"origin":203655,"position":4},"title":"text-underline-offset","date":"May 18, 2020","format":false,"excerpt":"The text-underline-offset property in CSS sets the distance of text underlines from their initial position. .element { \u00a0 text-underline-offset: 0.5em; } Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198851,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/","url_meta":{"origin":203655,"position":5},"title":"text-decoration-style","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied. a { text-decoration-style: solid; } Values solid: the default. Decoration is a single solid line.double: Decoration is a pair of solid lines.dotted: Decoration is a dotted line.dashed:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203655"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=203655"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203655\/revisions"}],"predecessor-version":[{"id":203774,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203655\/revisions\/203774"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=203655"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=203655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}