Repair edges of wrapped inline elements

The CSS box-decoration-break property controls the rendering of fragments of HTML elements. It is useful to fix styles at the edges where inline elements wrap.

Below you can find an example with two inline lists of emojis. In the second, box-decoration-break is set to clone. It fixes edges, retaining padding and border-radius styles.

All major browsers except Firefox need vendor prefixed property, -webkit-box-decoration-break to work.

CSS

.box-decoration-break--clone {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Presentational styles */

.font-xl {
  font-size: 2em;
}

ul.tags {
  font-size: 2rem;
  line-height: 2;
  padding: 0.25em;
  display: inline;
  list-style-type: none;
  background-color: hsla(204, 86%, 40%, .15);
  border-radius: 2000px;
}

.tags li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.2em;
  height: 1.2em;
  background-color: hsla(204, 86%, 40%, .5);
  border-radius: 2000px;
  vertical-align: 0.1em;
}

.tags span {
  position: relative;
  font-size: 0.75em;
  line-height: 1;
  top: 0.0625em;
}

.block {
  padding: 1em;
  text-align:center;
  background-color: hsla(40, 92%, 94%, 0.50);
  border-radius: 0.25em;
}

.block > * + * {
  margin-top: 1rem;
}

.block code {
  font-size: 0.75em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 24ch);
  gap: 1em;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
}

HTML

<div class="container">
  <div class="block">
    <p>An inline list of Emojis. It comes with <code>box-decoration-break: slice;</code> applied by default.</p>
    <div>
      <ul class="tags">
        <li><span>❤️</span></li>
        <li><span>👍</span></li>
        <li><span>👎</span></li>
        <li><span>😂</span></li>
        <li><span>😮</span></li>
        <li><span>😢</span></li>
      </ul>
    </div>
    <p class="font-xl">⛔️ 😔</p>

  </div>

  <div class="block">
    <p>Improving the edges of the fragments using <code>box-decoration-break: clone;</code></p>
    <div>
      <ul class="tags box-decoration-break--clone">
        <li><span>❤️</span></li>
        <li><span>👍</span></li>
        <li><span>👎</span></li>
        <li><span>😂</span></li>
        <li><span>😮</span></li>
        <li><span>😢</span></li>
      </ul>
    </div>
    <p class="font-xl">✅ 🤗</p>
  </div>
</div>

Preview

An inline list of Emojis. It comes with box-decoration-break: slice; applied by default.

❤️
👍
👎
😂
😮
😢

⛔️ 😔

Improving the edges of the fragments using box-decoration-break: clone;

❤️
👍
👎
😂
😮
😢

✅ 🤗