Fill in space between elements when using border-radius-CodePudding

When I create a grid using a large enough border-radius property on the grid cells and a gap property, gaps appear at the corners inbetween the elements (the red background).

.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  background-color: red;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}

<html>
<body>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>
</html>

How would I go about filling these gaps with the same color as my border?

CodePudding user response：

You can set background-color of the container to achieve this.

.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  background-color: black;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}

<html>
<body>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>
</html>

CodePudding user response：

Use a gradient coloration:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(black 0 0) 50%/90% 90% no-repeat;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}

.cell {
  background-color: gray;
  outline: 1vmin solid black;
  border-radius: 15px;
}

<html>

<body>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>

</html>

CodePudding user response：

If you change the css, then the design can be a little better.

*, ::after, ::before {
    box-sizing: border-box;
}
        .grid {
        background-color: black;
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    border-radius: 16px;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
    width: 100%;
    min-height: 1px;
  -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
      height:70px;
}

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>

<div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>

</body>
</html>