Des suggestions pour faire de cette conception de boîte arrondie à CSS?

Question

J'ai le CSS pour la conception de base de cette boîte arrondie. J'ai collé cela ci-dessous. J'essaie d'ajouter une bordure bleue avec l'effet de dessin suivant (voir l'image ci-dessous). Premièrement, est-ce possible? Si oui, toutes les suggestions seraient grandes.

J'ai essayé d'ajouter juste une bordure supérieure, mais cela ne donne pas tout à fait l'effet que je cherche.

.contentbox { 
    border-style: solid; 
    border-width: 2px; 
    border-color: rgb(54, 81, 143); 
    border-radius: 10px; 
    background-color: rgb(255, 255, 255); 
    opacity: 0.2; 
    box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03); 
    position: absolute; 
    left: 190px; 
    top: 324px; 
    width: 100%; 
    height: 524px; 
    z-index: 118; 
} 

Answer 1

This Codepen utilise différentes largeurs de bordure pour créer un effet similaire à ce qui est illustré dans l'exemple.

Bonne chance, et j'espère que cela aide.

html, body { 
 
    perspective: 100px; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
div { 
 
    margin: 20px; 
 
    border-style: solid; 
 
    border-width: 4px 1px 1px 1px; 
 
    border-color: rgb(54, 81, 143); 
 
    border-top-color: blue; 
 
    border-radius: 10px; 
 
    background-color: rgb(255, 255, 255); 
 
    box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03); 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div></div>