Check out example codes for "rounded gradient border css". It will help you in understanding the concepts better.

Code Example 1

@import url('//');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.

Code Example 2

  width: 300px;
  height: 80px;
  border: double 5px transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),         /*here must be*/
                    linear-gradient(to right, green, gold);    /*both gradients*/
  background-origin: border-box;
  background-clip: content-box, border-box;

Learn ReactJs, React Native from