Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make Inside border transparent ?

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 333
    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
    background-clip transparent border border css html css3 pure css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: