CSS3 Multi-Column column-rule Property

---

<p>The multi-column column-rule property is used to specify the number of rules.</p><p>You can try to run the following code to implement the column-rule property in CSS3 &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/RKivBu" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.multi { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Column count property */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-column-count: 4; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-column-count: 4; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column-count: 4; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Column gap property */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-column-gap: 40px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-column-gap: 40px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column-gap: 40px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Column style property */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column-rule: 4px solid #ff00ff; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;multi&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Tutorials Point originated from the idea that there exists a class of readers who respond &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;better to online content and prefer to learn new skills at their own pace from the comforts &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and &nbsp; &nbsp; &nbsp; &nbsp; elated by the response it generated, we worked our way to adding fresh tutorials to our &nbsp; &nbsp; &nbsp; &nbsp; repository which now proudly flaunts a wealth of tutorials and allied articles on topics &nbsp; &nbsp; &nbsp; &nbsp; ranging from programming languages to web designing to academics and much more. &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/8435/column-rule.jpg" class="fr-fic fr-dib" width="600" height="146"></p>

• Related Questions & Answers
• CSS3 Multi-Column rule-width Property
• CSS3 Multi-Column rule-style Property
• CSS3 Multi-Column rule-color Property
• CSS3 Multi-Column Property
• CSS3 Multi-Column column-count Property
• CSS3 Multi-Column column-fill Property
• CSS3 Multi-Column column-gap Property
• CSS3 Multi-Column column-span Property
• Animate CSS column-rule property
• Animate CSS column-rule-color property
• Change column-rule-width property with CSS Animations
• Shorthand property for setting all the column-rule-* properties
• Setting Column Gap using CSS3
• Setting Column Rules in CSS3
• CSS3 Multi color Gradients