{"id":13970,"date":"2011-08-31T20:03:26","date_gmt":"2011-09-01T03:03:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13970"},"modified":"2022-05-20T07:59:14","modified_gmt":"2022-05-20T14:59:14","slug":"border-collapse","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-collapse\/","title":{"rendered":"border-collapse"},"content":{"rendered":"\n<p>The\u00a0<code>border-collapse<\/code>\u00a0property is for use on\u00a0<code>&lt;table><\/code>\u00a0elements (or elements made to behave like a table through\u00a0<code>display: table<\/code>\u00a0or\u00a0<code>display: inline-table<\/code>).<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border-collapse: collapse | separate;<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>separate<\/code><\/li><li><strong>Applies to: <\/strong><code>table<\/code>\u00a0and\u00a0<code>inline-table<\/code>\u00a0elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nborder-collapse: collapse;\nborder-collapse: separate;\n\n\/* Global values *\/\nborder-collapse: inherit;\nborder-collapse: initial;\nborder-collapse: revert;\nborder-collapse: revert-layer;\nborder-collapse: unset;<\/code><\/pre>\n\n\n\n<ul><li><code>separate<\/code> <strong>(default)<\/strong> &#8211; in which all table cells have their own independent borders and there may be space between those cells as well.<\/li><li><code>collapse<\/code> &#8211; in which both the space and the borders between table cells collapse so there is only one border and no space between cells.<\/li><\/ul>\n\n\n\n<p>When <code>border-collapse<\/code> is <code>collapse<\/code>, it is notable that properties like <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-spacing\/\"><code>border-spacing<\/code><\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-radius\/\"><code>border-radius<\/code><\/a> (on actual borders) don&#8217;t do anything. You&#8217;ll need <code>border-collapse: separate;<\/code> if you need either of those things.<\/p>\n\n\n\n<p>Here&#8217;s an example where you can swap between the two:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWKrXQx\" src=\"\/\/codepen.io\/anon\/embed\/NWKrXQx?height=450&amp;theme-id=1&amp;slug-hash=NWKrXQx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWKrXQx\" title=\"CodePen Embed NWKrXQx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0border-collapse\u00a0property is for use on\u00a0&lt;table>\u00a0elements (or elements made to behave like a table through\u00a0display: table\u00a0or\u00a0display: inline-table).<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13913,"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":[4952,4953],"acf":[],"jetpack-related-posts":[{"id":14130,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/","url_meta":{"origin":13970,"position":0},"title":"visibility","date":"September 6, 2011","format":false,"excerpt":"The\u00a0visibility\u00a0property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element\u00a0without changing the layout. p { visibility: hidden; } tr { visibility: collapse; } visibility\u00a0has four valid values:\u00a0visible,\u00a0hidden,\u00a0collapse, and\u00a0inherit. We\u2019ll go through each of them to learn more. visible Just\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294643,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-spacing\/","url_meta":{"origin":13970,"position":1},"title":"border-spacing","date":"August 19, 2019","format":false,"excerpt":"The\u00a0border-spacing\u00a0property in CSS controls how far apart cells are in a\u00a0<table>\u00a0element (or an element that is made to be table-like via\u00a0display: table;). It takes any of the\u00a0lengths of CSS.\u00a0 Notably, it only has any effect at all if the table is using the default\u00a0border-collapse: separate;\u00a0and has no effect at all\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376581,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-outset\/","url_meta":{"origin":13970,"position":2},"title":"border-image-outset","date":"January 31, 2023","format":false,"excerpt":"The CSS\u00a0border-image-outset\u00a0property sets distance between an element\u2019s\u00a0border-image\u00a0area and how far it goes beyond the element\u2019s\u00a0border-box. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; border-image-outset: 2; } CodePen Embed Fallback The border-image-outset property is defined in the CSS Backgrounds and Borders Module Level 3 specification.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375796,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","url_meta":{"origin":13970,"position":3},"title":"border-image-slice","date":"December 20, 2022","format":false,"excerpt":"The CSS border-image-slice tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders. .element { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 30%; border-image-repeat: repeat; } The border-image-slice property is defined in the CSS Backgrounds and Borders Module Level 3 specification. When\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375434,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","url_meta":{"origin":13970,"position":4},"title":"border-image-repeat","date":"December 6, 2022","format":false,"excerpt":"The CSS border-image-repeat property controls how a border image is repeated to fill the outer edges of an element. It can also control the center of an element\u2019s background when border-image-slice is set to fill. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-repeat: repeat; } CodePen Embed\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374647,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-source\/","url_meta":{"origin":13970,"position":5},"title":"border-image-source","date":"November 4, 2022","format":false,"excerpt":"The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source. .container { border-width: 2rem; border-style: dotted; border-color: grey; border-image-source: url('path\/to\/image.jpg'); border-image-repeat: repeat; border-image-slice: 100; } CodePen Embed Fallback Notice in this example that border-image-source is one of three border-image-* properties: border-image-source: Specifies\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13970"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13970"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13970\/revisions"}],"predecessor-version":[{"id":365935,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13970\/revisions\/365935"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13970"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}