Buen día comunidad!
Estoy desarrollando un proyecto con HTML, CSS y Bootstrap (responsive y con @mediaqueries) para algunos bordes estoy utilizando degradado linear. Lo que sucede es que en desktop con diferentes navegadores es exactamente el diseño que pensamos, ya en mobile su comportamiento cambia según el navegador y dispositivo. Buscando diferentes soluciones antes de realizar la pregunta instale prefix-free (http://projects.verou.me/prefixfree/) y también utilice el debug prefix de VS Code. Nada de esto dio resultado dado que el comportamiento continua cambiando.
Les envío el código para su revisión y en caso de que puedan ayudarme estaría muy agradecido.
#mensaje {
border: 1.5px solid transparent;
-moz-border-image: -moz-linear-gradient(left,#a0dc56 0%, #0b9484 100%);
-webkit-border-image: -webkit-linear-gradient(left,#a0dc56 0%, #0b9484 100%);
border-image: linear-gradient(to right,#a0dc56 0%, #0b9484 100%);
border-image-slice: 1;
}
Acompaño los errores con imágenes para facilitar su comprensión: