Создание эффектов инвертированного радиуса границы

Вопрос:

Может ли быть инвертированный радиус границы эффект может быть достигнут там, где углы кажутся изогнутыми внутрь?

Ответ:

Свойство border-radius встроенного CSS не допускает отрицательных значений, которые могут привести к инвертированному эффекту. Однако вот альтернативный подход с использованием CSS:

Добавьте четыре дополнительных элемента внутри контейнера, убедившись, что они немного выходят за его границы. Эти элементы должны соответствовать цвету фона страницы, создавая иллюзию содержимого страницы под ней. Расположите эти элементы стратегически по углам и примените border-radius для достижения инвертированного эффекта.

Фрагмент кода:

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }