CODEWITHSUNDEEP
css
CupOfGreenTea
CupOfGreenTea

Reputation: 419

Layering colored divs doesn't work as expected

I have a single color background div and put a foreground div on top of it, however, where the bottom borders meet the background div's color leaks through. I don't even know how to debug it. Any ideas?

* {
    box-sizing: border-box;
    font-family: Rubik, sans-serif;
    --blue: hsl(246, 80%, 60%);
    --lightRedWork: hsl(15, 100%, 70%);
    --softBluePlay: hsl(195, 74%, 62%);
    --lightRedStudy: hsl(348, 100%, 68%);
    --limeGreenExercise: hsl(145, 58%, 55%);
    --violetSocial: hsl(264, 64%, 52%);
    --softOrangeSelfCare: hsl(43, 84%, 65%);
    --veryDarkBlue: hsl(226, 43%, 10%);
    --darkBlue: hsl(235, 46%, 20%);
    --desaturatedBlue: hsl(235, 45%, 61%);
    --paleBlue: hsl(236, 100%, 87%);
}

body {
    background-color: darkblue;
}

div {
    border-radius: 25px;
}

.mainContainer {
    display: grid;
    width: 100vw;
    height: 100vh;
    place-items: center;
}

.dashboard {
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mainSection {
    height: 500px;
    width: 300px;
    background-color: yellow;
    display: grid;
    grid-template-rows: 60% 40%;
    grid-row: span 2;
    background-color: #1D214B;
}

.cell {
    background-color: black;
}

.specialCell {
    display: grid;
    grid-template-rows: 20% 80%;
    background-color: hsl(15, 100%, 70%);
}

.secondDiv {
    background-color: #1D214B;
}
<div class="mainContainer">
    <div class="dashboard">
      <div class="mainSection">
      </div>
      <div class="specialCell">
        <div class="firstDiv"> </div>
        <div class="secondDiv">borders?</div>
      </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      
  </div>
</div>

Upvotes: 0

Views: 71

Answers (1)

AtomicUs5000
AtomicUs5000

Reputation: 378

Trying to perfectly align rounded borders of nested elements having different background colors never looks great. Every browser probably calculates and antialiases the border-radius in slightly different ways. You can try to play with borders, overflows, and even box-shadows, but you can never get it perfect. Even when you think you have something that looks good, scaling the zoom will often break it.

I recommend that you remove the background from the container, apply background color to each child and adjust the border-radius accordingly.

.specialCell {
    border-radius: 0;
    display: grid;
    grid-template-rows: 20% 80%;
}
.firstDiv {
    border-radius: 25px 25px 0 0;
    background-color: hsl(15, 100%, 70%);
}
.secondDiv {
    border-radius: 0 0 25px 25px;
    background-color: #1D214B;
}

Upvotes: 1

Related Questions