有什么建议可以将此圆形框设计为CSS？

Question

I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..

I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.

.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 uses different border widths to create a similar effect to what is pictured in the example.

Good luck, and I hope this helps.

 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>