Hallo,

ich hab erst vor angefangen HTML und CSS zu lernen und bin jetzt auf folgendes Problem gestoßen:

Ich möchte eine Webseite via CSS-Grid aufteilen und die Boxen jeweils abrunden. Allerdings werden manche Ecken immer abgeschnitten und ich finde nicht den Fehler an was das liegen könnte (siehe Screenshot, ecken rot Markiert). Hier der Code den ich bis jetzt verwende:

.gridbox{
  overflow: hidden;
  width: 99%;
  height: 99%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar content1 content2 content3"
      "sidebar footer footer footer";
  grid-gap: 0.4rem;
  border-radius: 1rem;
}

#nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: 1rem;
}

#sidebar{
  background: #18ffff;
  grid-area: sidebar;
  border-radius: 1rem;
}


#main {
  background: #84ffff;
  grid-area: main;
  border-radius: 1rem;
}


#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: 1rem;
}


#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: 1rem;
}


#content3 {
  background: #73ffbb;
  grid-area: content3;
  border-radius: 1rem;
}


#footer {
  background-color: #1de9b6;
  grid-area: footer;
  border-radius: 1rem;
}

Soweit ich das verstanden habe, spricht man wenn man bei border-radius: 1px 2px 2px 1px; die Ecken einzeln an und bei border-radius: 1rem; alle Ecken.

Danke für Antworten :D