Criando efeitos de raio de borda invertido

Pergunta:

É possível um raio de borda invertido efeito seja alcançado onde os cantos parecem curvar inward?

Resposta:

A propriedade border-radius do CSS nativo não permite valores negativos que resultariam em um efeito invertido. No entanto, aqui está uma abordagem alternativa usando CSS:

Adicione quatro elementos adicionais dentro do contêiner, garantindo que eles se estendam um pouco além de seus limites. Esses elementos devem corresponder à cor de fundo da página, criando a ilusão do conteúdo da página por baixo. Posicione esses elementos estrategicamente nos cantos e aplique um raio de borda para obter o efeito invertido.

Code Snippet:

#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; }