After effect border radious issue

i'm having a problem with my hover effect. I'm using the after effect to animate the width of the element from left to right. (0px to 100%) Using border radius is not filling the entire element. What is the solution to this?

https://imgur.com/a/CZxy9Oq

.btn {
    &,
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s;
        position: relative;
        font-size: 2.6rem;
        font-weight: 800;
        color: $color-white;
        //Change for the <button> element
        border: none;
        cursor: pointer;
        z-index: 20;
        position: relative;
        overflow: hidden;

        @include respond(tab-port) { // width < 900?
            z-index: 10;
        }
    }

    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-radius: 9rem;
        transition: all .2s ease-in-out;
        z-index: -1;
    }

    &--blue {
        border: 2px solid $color-primary-blue;

        &::after{
            background: $color-primary-blue;
        }
    }