index.html

---
layout: single
property_name: border-collapse
---

<section id="border-collapse" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/border-collapse/" data-property-name="border-collapse" data-tooltip="Single page for this property" target="_blank">Link</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-collapse">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-collapse" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="{{site.url}}/#border-collapse"><span>#</span>border-collapse</a>
    </h2>
    <div class="property-description">
      <p>Defines whether <strong>table</strong> borders should be separated or collapsed.</p>

    </div>

  </header>



    <style type="text/css">.border-collapse table { width: 100%; }.border-collapse td { border-bottom: 4px solid hsl(348, 100%, 61%);border-left: 4px solid #05ffb0;border-right: 4px solid hsl(48, 100%, 67%);border-top: 4px solid hsl(217, 71%, 53%);padding: 0.4em 0.5em; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-collapse: separate;">border-collapse: separate;</code>
        </p>
        <div class="example-description">
          <p>Each table <strong>cell</strong> will display its own borders.</p>
<p>In this example, each cell has a <code>border-width</code> of <strong>4px</strong>. As a result, the border between <em>two</em> cells will be <strong>8px</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div border-collapse " id="border-collapse-separate"><table><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></table></div>
        </div>
      </aside>
          <style type="text/css">#border-collapse-separate{ border-collapse:separate;}</style>
        <style type="text/css">#border-collapse-separate table { border-collapse: separate; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-collapse: collapse;">border-collapse: collapse;</code>
        </p>
        <div class="example-description">
          <p>Adjacent table cells will <strong>merge</strong> their borders together.</p>
<p>The cell that appears <em>first</em> in the code will &quot;win&quot;: its borders will <em>mask</em> those of the following cells.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div border-collapse " id="border-collapse-collapse"><table><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></table></div>
        </div>
      </aside>
          <style type="text/css">#border-collapse-collapse{ border-collapse:collapse;}</style>
        <style type="text/css">#border-collapse-collapse table { border-collapse: collapse; }</style>
    </section>

</section>