Box decoration break

box-decoration-break.markdown

Box decoration break

A Pen by Rick Cogley on CodePen.

License.

index.html

<div class="flow">
  <label>
    <input type="checkbox" checked />
    Toggle box-decoration
  </label>
  <p><code>A code element with box decoration applied</code></p>
</div>

script.js

const check = document.querySelector("input");
const code = document.querySelector("code");

check.addEventListener("input", (evt) => {
  if (check.checked) {
    code.setAttribute("style", "box-decoration-break: clone");
  } else {
    code.setAttribute("style", "box-decoration-break: unset");
  }
});

style.css

code {
  padding: 0.5em;
  max-width: 20ch;
  background: var(--color-primary);
  color: var(--color-light);
  border-radius: 0.5rem;
  box-decoration-break: clone;
  font-size: var(--size-step-2);
}

p {
  --flow-space: 2em;
  max-width: 25ch;
}

styles

<link href="https://demo-base-styles.netlify.app/css/global.css" rel="stylesheet" />