Rounded borders that look like the image attached

I don't have a clue how to create these 3d looking borders. The borders have a green gradient going into transparent. The green used is #2CA05A. The border-radius is 30px.

This is what I have:

.new-feature-card {
  box-sizing: border-box;
  position: relative;
  width: 345px;
  height: 207px;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(44, 160, 90, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  backdrop-filter: blur(8px);
  border-radius: 30px;
  border-style: inset;
}

Here is one way of doing it:

.container {
  background-image: linear-gradient(to bottom right, #2CA05A, #002d1f, #002d1f, #002d1f, #2CA05A);
  padding: 3px 0;
  border-radius: 10px;
}

.card {
  background-color: #002d1f;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}

<div class="container">
  <div class="card">
    <p>3D borders</p>
  </div>
</div>

Just set the desired linear-gradient points, colors and border radius.

https://codepen.io/unjica-the-sans/pen/PwwLLxN