Création d'effets de rayon de bordure inversé

Question :

Un rayon de bordure inversé peut-il l'effet soit obtenu là où les coins semblent se courber vers l'intérieur?

Réponse :

La propriété border-radius du CSS natif n'autorise pas les valeurs négatives qui entraîneraient un effet inversé. Cependant, voici une approche alternative utilisant CSS :

Ajoutez quatre éléments supplémentaires dans le conteneur, en vous assurant qu'ils s'étendent légèrement au-delà de ses limites. Ces éléments doivent correspondre à la couleur d'arrière-plan de la page, créant ainsi une illusion du contenu de la page en dessous. Positionnez ces éléments de manière stratégique autour des coins et appliquez un rayon de bordure pour obtenir l'effet inversé.

Extrait de code :

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