So I have a solid border right and border-image, and a border-radius but the border right/border-image does not curve as required with the border radius value:
<code>.server-info-container {
border: none;
/* border-left: 2px solid transparent; */
border-right: 2px solid transparent;
border-image: linear-gradient(to bottom, #545657, transparent) 1 100%;
-webkit-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
-moz-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
border-radius: 2rem;
padding: 20px;
margin: 20px;
}</code>
<code>.server-info-container {
border: none;
/* border-left: 2px solid transparent; */
border-right: 2px solid transparent;
border-image: linear-gradient(to bottom, #545657, transparent) 1 100%;
-webkit-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
-moz-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
border-radius: 2rem;
padding: 20px;
margin: 20px;
}</code>
.server-info-container {
border: none;
/* border-left: 2px solid transparent; */
border-right: 2px solid transparent;
border-image: linear-gradient(to bottom, #545657, transparent) 1 100%;
-webkit-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
-moz-box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
box-shadow: -4px 9px 15px 1px rgba(0, 0, 0, 0.63);
border-radius: 2rem;
padding: 20px;
margin: 20px;
}<code><div class="server-info-container">
<h2>Server Information</h2>
<p>This is a container with server information.</p>
</div></code>
<code><div class="server-info-container">
<h2>Server Information</h2>
<p>This is a container with server information.</p>
</div></code>
<div class="server-info-container">
<h2>Server Information</h2>
<p>This is a container with server information.</p>
</div>