Creación de efectos de radio de borde invertido

Pregunta:

¿Puede un radio de borde invertido Se logra el efecto donde las esquinas parecen curvarse. ¿hacia adentro?

Respuesta:

La propiedad border-radius del CSS nativo no permite valores negativos que darían como resultado un efecto invertido. Sin embargo, aquí hay un enfoque alternativo usando CSS:

Agregue cuatro elementos adicionales dentro del contenedor, asegurándose de que se extiendan ligeramente más allá de sus límites. Estos elementos deben coincidir con el color de fondo de la página, creando una ilusión del contenido de la página debajo. Coloque estos elementos estratégicamente alrededor de las esquinas y aplique un radio de borde para lograr el efecto invertido.

Fragmento de código:

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