Problema com Border-radius

Front-end
#1

Bom dia pessoal,

estou tentando arredondar as bordas de um botão gradiente que estou fazendo, porem já tentei mudar o border-radius de várias formas e não consegui ainda alterá-lo.

Colocarei o código abaixo.

Desde já agradeço pela ajuda…


<style>
  .pic-dim{
        width:100%;
        margin-bottom:6px;
    }
   .card{
        margin:10px;
        padding: 5px 25px 15px 15px;
        box-shadow: 1px 1px 1px 1px ghostwhite;
        align-items: center;
        border-radius:10px;
        background:transparent;
    }
   .btn-pos{
        margin:10px;
        position:relative;
        right:-57px;
        top:15px;
    }
   .title{
        font-family: noto sans;
        font-weight:800;
        font-size:24px;
        text-align:center;
    }
    .subtitle{
        font-family: noto sans;
        font-style:lighter;
        font-size:12px;
        text-align:center;
    }
    .fill{
        background: -webkit-linear-gradient(90deg, #7A2180 16.67%, #E40276 95.31%);
        -webkit-background-clip:text;
        -webkit-text-fill-color: transparent;
        
        
        background-image:transparent;
    }
    
    .gradient-box {
  
      display: flex;
      align-items: center;
      //width: 50vw;
      width: 90%;
      margin: auto;
      max-width: 22em;
    
      position: relative;
      padding: 30% 2em;
      box-sizing: border-box;
    
      $border: 5px;
      color: #FFF;
      background: transparent;
      background-clip: padding-box; /* !importanté */
      border: solid $border transparent; /* !importanté */
      border-radius: 1em;
    
      &:before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        margin: -$border; /* !importanté */
        border-radius: inherit; /* !importanté */
        background: linear-gradient(to right, red, orange);
      }
    }
    
    .bdr-rd{
        border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
    }
    .border-gradient {
      border: 10px solid;
      border-image-slice: 1;
      border-width: 2px;
      
    }
    .border-gradient-purple {
      border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
    }
    
    .bg{
        background-image:url(https://images-shoptime.b2w.io/produtos/01/00/oferta/59075/8/59075877_1GG.jpg);    
        background-repeat:repeat;
    }
    
    </style>

<div class="container-fluid row-resource-center bg">
  <div class="row">
   
    <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">.col-6 .col-md-4
        <div class="card">
            <div class="card-body">
                
                    <div class="thumbnail">
                        <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" class="pic-dim">
                        <div class="caption">
                          <p class="text">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
                          <h5 class="title">Titulo</h5>
                          <h6 class="subtitle text-muted">Titulo</h6>
                          
                        <a href="#" class="gradient-box"> OLA </a>
                        
                        <a href="#" class="bdr-rd btn-pos fill border-gradient border-gradient-purple text-12  px-4 py-1">CAREERS</a>
                        
                        
                        </div>
                      
                    </div>
                    
                   
            </div>
        </div>  
    </div>    
      
      
    <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">.col-6 .col-md-4</div>
      
     <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4">.col-6 .col-md-4</div>
      
     </div>
</div>