Try it Editor: Change box-decoration-break with JavaScript

Edit This Code :

<!DOCTYPE html>
<html>
<head>
<style>
span {
    border: 5px solid red;
    padding:  0em 1em;
    border-radius: 16px;
    font-size: 24px;
    line-height: 2;
}
</style>
</head>
<body>
<h1>Change box-decoration-break with JavaScript</h1>

<span id="ex1">CSS<br>is<br>easy<br>to learn</span>

<p>Click the "Try it" button to set the box-decoration-break to "clone":</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> IE/Edge do not support the box-decoration-break property.</p>

<script>
function myFunction() {
    document.getElementById("ex1").style.WebkitBoxDecorationBreak = "clone"; // Chrome
    document.getElementById("ex1").style.OBoxDecorationBreak = "clone"; // Opera    
    document.getElementById("ex1").style.boxDecorationBreak = "clone";
}
</script>

</body>
</html>
Result :