De esta forma lo puedes manejarManejar con la propiedadtus colores. no tengo méritos en esta respuesta, te dejo el border-image: round;
LINK de donde vi la información.
.box {
position: relative;
border: 2px4px solid green;transparent;
border-image-sourceradius: linear-gradient(#a42e6e,16px;
#783057); background: white;
border background-imageclip: padding-slicebox;
padding: 20;10px;
}
.box::after{
border-image position: round;absolute;
top: -webkit4px; bottom: -border4px;
left: -image4px; right: round;-4px;
padding background: 2em;linear-gradient(#a42e6e, #783057);
-webkit-border-radius content: 30px;'';
z-mozindex: -1;
border-radius: 30px;16px;
}
<div class="box">
<h4 class="titulo-degradado-1">
174
</h4>
<p>Atención al vecino</p>
</div>