この丸みを帯びたボックスデザインをCSSにするための提案はありますか？

Question

私は、この丸いボックスの基本的なデザインのCSSを持っています。私はそれを貼り付けた。次のデザイン効果で青い枠線を追加しようとしています（下の画像を参照してください）。まずこれは可能ですか？もしそうなら、どんな提案もすばらしいでしょう。

私はちょうど上のボーダーを追加しようとしましたが、それは私が探している効果があまりありません。

.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例に描かれているものと同様の効果を作成するために、異なるボーダー幅を使用しています。

幸運にも、これが役立つことを願っています。

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>