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.