How to Make Inverted Card Using Elementor for FREE | Elementor Tutorial

Find the Inverted Border Card code used in this tutorial in below

Color code used:

Page Background Color:
#083D41

Button Colors:
#03a9f4
#ff3d7f

CSS code used:

.cpccard{
    position: relative;
    height: 430px;
}
.cpccard .mybox{
    position: relative;
    width: 110%;
    height: 200px;
    border-radius: 15px;
}
.cpccard .mybox:nth-child(1)::before{
    content: "";
    position: absolute;
    top: 106px;
    left: -1px;
    height: 20px;
    width: 20px;
    background: transparent;
    z-index: 10;
    border-bottom-left-radius: 20px;
    box-shadow: -6px 6px #083D41; 
}
.cpccard .mybox:nth-child(1)::after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 86px;
    height: 20px;
    width: 20px;
    background: transparent;
    z-index: 10;
    border-bottom-left-radius: 20px;
    box-shadow: -6px 6px #083D41; 
}

.cpccard .mybox:nth-child(2){
    background-color: #ffffff;
    height: 220px;
    width: 100%;
}

.cpccard .mybox:nth-child(2)::before{
    content: "";
    position: absolute;
    top: 94px;
    left: -1px;
    height: 20px;
    width: 20px;
    background: transparent;
    z-index: 10;
    border-top-left-radius: 20px;
    box-shadow: -6px -6px #083d41;
    
}

.cpccard .mybox:nth-child(2)::after{
    content: "";
    position: absolute;
    top: -1px;
    left: 90px;
    height: 20px;
    width: 20px;
    background: transparent;
    z-index: 10;
    border-top-left-radius: 20px;
    box-shadow: -6px -6px #083d41;
    
}

.cpccard .mycircle{
    position: absolute;
    top: 50%;
    left: -70px;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 10px solid #083d41;
}
.cpccard .mybtn a{
    position: relative;
    top: 25px;
    padding: 8px 30px;
    border: none;
    outline: none;
    background: #03a9f4!important;
    border-radius: 30px;
    color: #ffffff;
    font-size: 1em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    border: 5px solid #083d41;
    box-shadow: 0 0 0 10px #ffffff;
    transition: 0.5s;
}
.cpccard .mybtn a:hover{
    letter-spacing: 0.5em;
    background: #ff3d7f!important;
}

Share On

Facebook
Twitter
Pinterest
LinkedIn
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts