extra.css/scallopedBorder/style.css

body {
  font-family: monospace;
  height: 100vh;
  width: 100vw;
  text-align: center;
}

p {
  max-width: 660px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 2;
  text-align: left;
}

h1 {
  font-size: 4rem;
  display: inline-block;
  font-weight: 100;
  margin: 1rem auto;
  padding: 1rem 2rem;
}

@supports (background: paint(something)) {
  h1 {
    /* 
      Optionally set property values. 
      This can be done at root or local scope 
    */
    --extra-scallopRadius: 15; /* default: 10 */
    --extra-scallopColor: #8266ff; /* default: black */
    --extra-scallopWeight: 3; /* default: 2 */

    background: paint(extra-scallopedBorder);
    line-height: 1.5;
  }

  i {
    --extra-scallopRadius: 5; /* default: 10 */
    --extra-scallopColor: #00eeff; /* default: black */
    --extra-scallopWeight: 1; /* default: 2 */

    /* Must add padding to show border properly*/
    padding: 0.75rem;

    background: paint(extra-scallopedBorder);
  }
}