How To Use Gradient Border With Border Radius

Using this code you can demonstrate the gradient border of any card and button on your HTML website. You can customize it as you want.
So let’s go.

HTML:

<!-- Gradient Border With Border Radius -->
<div class="gradient-border-card-one">
    <h1>Gradient Border</h1>
    <p>style One</p>
</div>

<!-- Gradient Border Without Border Radius -->
<div class="gradient-border-card-two">
    <h1>Gradient Border</h1>
    <p>style Two</p>
</div>

CSS:

//Gradient Border With Border Radius
.gradient-border-card-one {
    background-color: #161827;
    padding: 30px;
    width: 400px;
    text-align: center;
    position: relative;
    border-radius: 20px;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
        top:0;
        left: 0;
        border-radius: 20px;
        padding: 3px;
        background: linear-gradient(207.14deg, #bd6513  0%,#ffd871 100%);
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transition: var(--transition);
    }
    h1 {
        font-size: 42px;
        font-weight: 700;
        color: #ff014f;
    }
    p {
        color: #ffffff;
        font-size: 18px;
    }
}

//Gradient Border Without Border Radius
.gradient-border-card-two {
    background: linear-gradient(207.14deg, #ff014f  0%,#ffd871 100%);
    padding: 30px;
    width: 400px;
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: 1;
    &::before {
        position: absolute;
        content: '';
        background-color: #4a4f73;
        left: 3px;
        right: 3px;
        bottom: 3px;
        top: 3px;
        z-index: -1;
    }
    h1 {
        font-size: 42px;
        font-weight: 700;
        color: #ff014f;
    }
    p {
        color: #ffffff;
        font-size: 18px;
    }
}