Как добавить радиус границы к элементу сетки CSS

Question

https://codepen.io/siddagra/pen/vYBoJyM Я хочу добавить border-radius для каждого из пяти фиолетовых + серых квадратов, в идеале не добавляя html-стили в качестве расположения элементов div внутри блоков. Сам может быть предметом изменений. Пожалуйста, помогите, я попробовал: селекторы первого и второго ребенка, но это не сработало.

.ExpandedSetPiece:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.ExpandedSetPiece:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Answer 1

Попробуйте это:

.ExpandedSetPiece div:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.ExpandedSetPiece div:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Термин «ребенок», возможно, немного вводит в заблуждение. Если вы используете :first-child на .ExpandedSetPiece, это будет означать первую из этих групп.

Answer 2

Просто добавьте код ниже, где --border-radius - желаемый радиус.

:root {
  --border-radius: 10px;
}

.ExpandedArmor {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.ExpandedCells:nth-child(3) {
  border-radius: 0 0 var(--border-radius) var(--border-radius);

Answer 3

Сначала добавьте границу к каждому контейнеру Div, а затем добавьте border-radius

.ExpandedSetPiece{
border: 1px solid black;
border-radius: 5px;}

Надеюсь, это то, что вам нужно.