Любые предложения по созданию этого скругленного дизайна коробки для 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

Этот 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>