Create a transparent border with CSS
Last Updated :
30 Jan, 2020
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.
<!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>
|
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.
<!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>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...