Как реализовать этот вид разделителей кнопок numpad

Question

снимок экрана figma

Как лучше всего реализовать этот вид разделителей кнопок numpad?

Answer 1

Если вы используете таблицу, я бы поместил все границы в нужный цвет, и только строка ниже заменит цвет внешней границы на цвет фона.

Если вам не нравится эта последняя идея Вы можете просто использовать: after и: before, и это тоже сделает это.

        table{
            background-color: lightblue;
            width: 250px;
            height: 250px;
            border-collapse: collapse;
        }

        td{

            border-right: 3px solid rgba(0, 150, 150, 0.8);
            border-bottom: 3px solid rgba(0, 150, 150, 0.8);
        }

        td:last-child{
            border-right: none;
        }

        tr:last-child td {
            border-bottom: none;
        }