Create a transparent border with CSS

In CSS, we can create a transparent border by using the border property in a nested div tag.

The steps to create this are:
Step 1: Create a nested div tag.
Step 2: Specify the outer div tag’s border-style to be solid and the border-width property can be of any desired size.
Step 3: The size of the inner div tag is made smaller than the outer div tag.

Alternatively, we can specify all the individual properties by using the border shorthand property as shown in the example below.

Example 1: Create a transparent border in CSS using the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        h1 {
            color: green;
        }
          
        .outer {
            width: 300px;
            height: 300px;
            margin: 10%;
            border: 10px solid rgba(0, 0, 0, .4);
            border-radius: 5px;
        }
          
        .inner {
            width: 270px;
            height: 270px;
            margin: auto;
            margin-top: 3%;
            text-align: center;
            background: rgba(0, 0, 0, .4);
            border-radius: 5px;
            padding: 5px;
        }
    </style>
</head>
  
<body>
    <div class="outer">
        <div class="inner">
            <h1>GeeksforGeeks</h1>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



Another alternative approach would be to use a single div tag and to use the border-style and background-clip property to create the transparent border.

The steps to reproduce this are:
Step 1: Create a div tag.
Step 2: Specify the border-style property to be double to set two borders around the box.
Step 3: Set the background-clip property to padding-box which clips the background color to the padding of the element.

Example 2: Create a transparent border in CSS using the alternative approach discussed above.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        h1 {
            color: green;
        }
          
        .trans_border {
            width: 270px;
            height: 270px;
            margin: auto;
            margin-top: 3%;
            text-align: center;
            border: 20px double rgba(0, 0, 0, .4);
            background: rgba(0, 0, 0, .4);
            background-clip: padding-box;
            border-radius: 5px;
            padding: 5px;
        }
    </style>
</head>
  
<body>
    <div class="trans_border">
        <h1>GeeksforGeeks</h1>
    </div>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.