Open In App

Create a transparent border with CSS

Last Updated : 30 Jan, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Similar Reads

How to make Transparent Input Field on a Transparent Div in Tailwind CSS ?
To make an HTML input field transparent on a transparent div using Tailwind CSS, apply the bg-transparent class to both the input field and the div. This ensures that the background of both elements is transparent, allowing the underlying content or background to show through. Syntax:&lt;div class="bg-transparent"&gt; &lt;input type="text" class="b
1 min read
How to Set an Input Field Transparent on a Transparent Div in HTML ?
Creating a transparent input field on a transparent div can enhance the aesthetic appeal of your web page, especially when you want to overlay input fields on background images or videos. In this article, we will discuss how to achieve this effect using HTML and CSS. Example 1: Basic Transparent Input FieldIn this example, we create a basic transpa
2 min read
How to create a transparent or blurred card using CSS ?
In this article, we will create a transparent or blurred card using basic HTML and CSS properties. The blurred effect is also called the glass effect. Approach: In the body tag, create the layout of the card.Define the classes to each of the components to use the CSS properties.To apply the glass or blur effect, use the backdrop filter property to
2 min read
How to Create a Transparent button using HTML and CSS ?
To create a transparent button using HTML and CSS, you can set the background-color property to have an rgba value with an alpha channel less than 1 (e.g., rgba(0, 0, 0, 0.5) for a semi-transparent black). This allows the underlying content to show through the button, creating a transparent effect. This article uses the background-color: transparen
2 min read
Using Primer CSS - A Simple and Transparent CSS Library for Web Development
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to-use set of styles for web development. Obvious an
3 min read
How to create a transparent iframe ?
The &lt;iframe&gt; tag is an inline frame. It is used to embed another HTML page within the current HTML page. Syntax: &lt;iframe src = &quot;URL&quot;&gt;&lt;/iframe&gt; A transparent iframe can be made by setting its background to transparent. body { background-color : transparent; } And, the allowtransparency attribute of "iframe" is to be set a
1 min read
How to give text or an image transparent background using CSS ?
In this article, we will know to make the text or image a transparent background using the CSS &amp; will see its implementation through the example. The opacity property is used to set image or text transparent using CSS. The opacity attribute is used to adjust the transparency of text or pictures. The value of opacity lies between 0.0 to 1.0 wher
2 min read
Design a transparent login/Sign Up webpage using HTML and CSS
Project Introduction: In this article, we will discuss how to design a transparent login webpage using HTML and CSS. Project Structure: index.htmlstyle.css index.html Explanation: We have put the login form in a class called container and we have placed each input tag in a separate div with class row so that each input tag occupies the full line. W
3 min read
How to make transparent web page using CSS ?
In this article we are going to learn How to make a transparent web page using CSS, To make a web page transparent using CSS, you can use the "background-color" property with the "rgba" function and set the alpha value to 0. This will make the background transparent. Additionally, you can set the opacity of the entire page using the "opacity" prope
3 min read
Onsen UI CSS Component Textarea Transparent
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component Textarea Transparent is used to create the transparent text area with a given number of rows. To create the transparent textarea, we will use textar
2 min read
Article Tags :