Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make Inside border transparent ?

    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 110
    Comment on it

    Hi all, Here are two method to make transparent border first is by using pseudo element and second is by using background-clip

    Example 1:-

    In the method I'm using pseudo element :before

    .box-border {
        background: #0f8ac3;
        color: #fff;
        margin: 20px 10px 10px;
        padding: 5px;
        position: relative;
    }
    .box-border:before {
        border: 2px solid #0f8ac3;
        content: "";
        position: absolute;
        top: -8px;
        bottom: -8px;
        left: -8px;
        right: -8px;
    }
    

    Output:-

    Transparent Inside Border


    Example 2:-

    and in the method I'm using background-clip: content-box

    The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath it's border or not - MDN

    .clip-box {
        background: #0f8ac3; 
        color: #fff; 
        background-clip: content-box;
        border: 2px solid #0f8ac3; 
        padding: 5px;
        text-indent: 8px;
        line-height: 30px;
    }
    

    Output:-

    Transparent Inside Border

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: