HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS column-rule-style Example</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 1.5rem;
      line-height: 1.6;
    }

    .columns {
      column-count: 3;
      column-gap: 20px;
      column-rule-style: solid;
      column-rule-width: 2px;
      column-rule-color: black;
      text-align: justify;
    }
  </style>
</head>
<body>
  <h1>Column Rule Style Example</h1>
  <div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
    <p>Fusce tincidunt, nisl eget venenatis vestibulum, nisl mauris luctus mi, a bibendum est dui non metus. Nulla facilisi. Phasellus ullamcorper, est vel laoreet suscipit, mauris ex facilisis libero, et dictum mi lorem et nunc.</p>
    <p>Sed fermentum, arcu sit amet volutpat malesuada, erat nulla facilisis urna, ac scelerisque ligula magna vel leo. Integer bibendum, sapien eu vestibulum fermentum, risus purus accumsan odio, eu porttitor mi arcu eu urna.</p>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS column-rule-style Property - Solid Column Rule