{"id":178801,"date":"2014-08-14T14:13:24","date_gmt":"2014-08-14T21:13:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178801"},"modified":"2014-08-14T14:13:24","modified_gmt":"2014-08-14T21:13:24","slug":"column-rule","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule\/","title":{"rendered":"column-rule"},"content":{"rendered":"<p>To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you\u2019ve ever styled <code>border<\/code>, then you are ready to style <code>column-rule<\/code>.<\/p>\n<pre rel=\"css\" class=\" language-css\"><code class=\" language-css\">.container {\r\n  -webkit-columns: 2 400px;\r\n     -moz-columns: 2 400px;\r\n          columns: 2 400px;\r\n  -webkit-column-rule: 1px solid black;\r\n     -moz-column-rule: 1px solid black;\r\n          column-rule: 1px solid black;\r\n}<\/code><\/pre>\n<p>The property is shorthand for <code>column-rule-width<\/code>, <code>column-rule-style<\/code>, and <code>column-rule-color<\/code>, which is the same pattern as <code>border<\/code> and accepts the same values.<\/p>\n<pre rel=\"css\" class=\" language-css\"><code class=\" language-css\">-webkit-column-rule-width: 1px;\r\n   -moz-column-rule-width: 1px;\r\n        column-rule-width: 1px;\r\n-webkit-column-rule-style: solid;\r\n   -moz-column-rule-style: solid;\r\n        column-rule-style: solid;\r\n-webkit-column-rule-color: black;\r\n   -moz-column-rule-color: black;\r\n        column-rule-color: black;<\/code><\/pre>\n<p><code>column-rule-width<\/code> can be a length like <code>3px<\/code> or a keyword value like <code>thin<\/code>.<\/p>\n<p><code>column-rule-style<\/code> can be any of the <code>border-style<\/code> values like <code>solid<\/code>, <code>dotted<\/code>, and <code>dashed<\/code>.<\/p>\n<p><code>column-rule-color<\/code> can be any color value.<\/p>\n<div><iframe loading=\"lazy\" id=\"cp_embed_0ccb4387c6c9cea283d0e5d6bc7f05b2\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\" src=\"\/\/codepen.io\/anon\/embed\/0ccb4387c6c9cea283d0e5d6bc7f05b2?height=350&amp;theme-id=1&amp;slug-hash=0ccb4387c6c9cea283d0e5d6bc7f05b2&amp;default-tab=result\" width=\"300\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><script src=\"\/\/codepen.io\/assets\/embed\/ei.js\" async=\"\"><\/script><\/p>\n<p>Unlike <code>column-gap<\/code>, <code>column-rule<\/code> doesn\u2019t take up space. If the <code>column-rule-width<\/code> is thicker than the <code>column-gap<\/code> then the rule will expand underneath the columns.<\/p>\n<p><iframe loading=\"lazy\" id=\"cp_embed_2f3b2dc1556f15b71ce3bd48d4cbb9e0\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\" src=\"\/\/codepen.io\/anon\/embed\/2f3b2dc1556f15b71ce3bd48d4cbb9e0?height=300&amp;theme-id=1&amp;slug-hash=2f3b2dc1556f15b71ce3bd48d4cbb9e0&amp;default-tab=result\" width=\"300\" height=\"300\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nThe vertical rule will only exist <em>between<\/em> columns that have content.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"\/almanac\/properties\/c\/columns\">columns<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-count\">column-count<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-fill\">column-fill<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-gap\">column-gap<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-span\">column-span<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-width\">column-width<\/a><\/li>\n<\/ul>\n<h3>Additional Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-rule\" rel=\"noopener\">MDN Docs<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/#column-rule\" rel=\"noopener\">CSS3 Spec<\/a><\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Can I Use<\/a><\/li>\n<\/ul>\n<h3>Browser Support<\/h3>\n<p>Multi-column layout support:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\">Chrome<\/th>\n<th class=\"safari\">Safari<\/th>\n<th class=\"firefox\">Firefox<\/th>\n<th class=\"opera\">Opera<\/th>\n<th class=\"ie\">IE<\/th>\n<th class=\"android\">Android<\/th>\n<th class=\"iOS\">iOS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\" data-browser-name=\"Chrome\">Any<\/td>\n<td class=\"yep\" data-browser-name=\"Safari\">3+<\/td>\n<td class=\"yep\" data-browser-name=\"Firefox\">1.5+<\/td>\n<td class=\"yep\" data-browser-name=\"Opera\">11.1+<\/td>\n<td class=\"yep\" data-browser-name=\"IE\">10+<\/td>\n<td class=\"yep\" data-browser-name=\"Android\">2.3+<\/td>\n<td class=\"yep\" data-browser-name=\"iOS\">6.1+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Don&#8217;t forget your prefixes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you\u2019ve ever styled border, then you are ready to style column-rule. .container { -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: [&hellip;]<\/p>\n","protected":false},"author":200919,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":322541,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-style\/","url_meta":{"origin":178801,"position":0},"title":"column-rule-style","date":"October 5, 2020","format":false,"excerpt":"The column-rule-style CSS property specifies type of line that's drawn between columns in a CSS multi-column layout. The property is sort of limited on its own. When we declare it, it will draw a line between CSS columns that's one pixel wide and black. .columns { columns: 2 600px; column-rule-style:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191206,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-prefix-properties\/","url_meta":{"origin":178801,"position":1},"title":"Mixin to Prefix Properties","date":"December 19, 2014","format":false,"excerpt":"In case you're interested in handling your own CSS vendor prefixing (rather than, say, Autoprefixer or Compass), here is a mixin to help with that. Rather than just appending every known prefix to everything, you pass it the prefixes you want to use, so you have more fine grained control\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322529,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-color\/","url_meta":{"origin":178801,"position":2},"title":"column-rule-color","date":"October 5, 2020","format":false,"excerpt":"The column-rule-color CSS property determines the color of a line between columns in a CSS multi-column layout. The property can't act alone! In order to see the color, we need to make the line \u2014 technically called a \"rule\" \u2014 between columns. That requires the column-rule-style property. .columns { column-count:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178795,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-width\/","url_meta":{"origin":178801,"position":3},"title":"column-width","date":"August 14, 2014","format":false,"excerpt":"When you want to keep your columns at a specific width, use column-width. section { -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; } The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-width\/","url_meta":{"origin":178801,"position":4},"title":"column-rule-width","date":"October 5, 2020","format":false,"excerpt":"The column-rule-width CSS property sets the thickness of the line that is drawn between columns by column-rule-style in a CSS multi-column layout. .columns { columns: 2 600px; column-rule-style: dotted; column-rule-width: 3px; } Another way to go about it is to use the column-rule shorthand property, which combines column-rule-width, column-rule-style and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178807,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-fill\/","url_meta":{"origin":178801,"position":5},"title":"column-fill","date":"August 14, 2014","format":false,"excerpt":"When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially. ul { height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; } This property is only available in Firefox. Firefox will automatically\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178801"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/200919"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=178801"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178801\/revisions"}],"predecessor-version":[{"id":178817,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178801\/revisions\/178817"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=178801"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=178801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}