border-collapse issue on elements (not table)

Question

I have been trying to get the borders on elements that are touching to merge... I thought that border-collapse would be a straightforward solution to this... but apparently not, or I am misusing it.

Here's my code...

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

style.css:

body {
  box-sizing: border-box;
}
.container > * {
  border:green 1px solid;
  border-collapse:collapse;
}
.container {
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

I am still getting the appearance of 2px borders where elements meet. Thanks for any help... I've looked around at a few threads but I'm not finding answer. Again Thanks!

border-collapse doesn't apply to anything that's not a CSS table. That includes CSS grids. — BoltClock, Apr 24 '21 at 10:10
Hmmmm thanks... could you suggest a achieving a similar effect for non-table elements? — Chris Andrew, Apr 24 '21 at 10:16

score 0 · Answer 1 · answered Apr 24 '21 at 17:55

This snippet works for the particular case (7 elements in a 4 column grid) given in the question by using the (simplistic) method of making various borders transparent so there is no doubling up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <style>
body {
  box-sizing: border-box;
}

.container > * {
  border:green 1px solid;
  position: relative;
  overflow: visible;
}

.container > *:nth-child(2), .container > *:nth-child(3), .container > *:nth-child(4), .container > *:nth-child(6), .container > *:nth-child(7) {
  border-left-color: transparent;
}

.container > *:nth-child(5), .container > *:nth-child(6), .container > *:nth-child(7) {
  border-top-color: transparent;
}

.container {  
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
</style>
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

More sophisticated attempts that would work in the general case- pseudo elements overwriting border of previous sibling element for example - only work in theory as the placing of single pixels can vary on different displays so results could be half a (CSS) pixel out for example.

border-collapse issue on elements (not table)

1 Answers1