HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #267326; padding: 10px; margin-bottom: 25px; column-count: 2; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; column-rule-width: 4px; -webkit-column-rule-width: 4px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 4px; /* Firefox */ column-rule-style: double; -webkit-column-rule-style: double; /* Chrome, Safari, Opera */ -moz-column-rule-style: double; /* Firefox */ } </style> </head> <body> <h1>CSS column-rule-style Property</h1> <div> Joanne Rowling was born on 31st July 1965 at Yate General Hospital near Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.columnRuleStyle = "dashed"; x.style.WebkitColumnRuleStyle = "dashed"; x.style.MozColumnRuleStyle = "dashed"; } </script> <p><strong>Note</strong>: Click on the button to change the column-rule-style from double to dashed.</p> </body> </html>
OUTPUT
×

Save as Private