CSS Transparent Border

We will understand the CSS transparent border. The CSS border property is utilized to create a transparent border. Let us first understand the CSS border property.

CSS Border

The CSS border property is used to add a border to the HTML element. It is the shorthand property that defines the border width, border style, and border color.

Syntax:

The "border" is the CSS property in the above-given syntax. Following are the descriptions of the border values:

Border-width: The border-width is the value of width that is given to the border property to specify the width of the border.
Border-style: The border style is the value that is given to the border property to specify the style of the border. Various border style values are given below:
- Solid: It specifies a solid border.
- Dotted: It specifies a dotted border.
- Double: It specifies a double border.
- Dashed: It specifies a dashed border.
- Ridge: It specifies a 3D ridged border.
- Groove: It specifies a 3D grooved border.
- Outset: It specifies a 3D outset border.
- Inset: It specifies a 3D inset border.
- Hidden: It specifies a hidden border.
- None: It specifies a no border.
Border color: The border color is the value that is given to the border property to specify the color of the borders.

Demonstration of the CSS Border

We will comprehend the CSS border property with the help of demonstrations.

Demonstration 1:

We will create a border on the <div> element in this demonstration utilizing the CSS border property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Border</title>
    <style>
        div {
            font-family: 'Times New Roman', Times, serif;
            padding: 5px;
            border: 2px solid lightcoral;
        }
    </style>
</head>
<body>
    <h3>CSS border property</h3>
    <div>
        We have utilized the CSS border property to put the border on this element.
    </div>
</body>
</html>

Output:

Here is the output where we can clearly witness a solid border of 2px around the <div> element.

Demonstration 2:

We will create different styles of border in various elements in this demonstration utilizing the CSS border property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Border with different border styles</title>
    <style>
        p {
            font-family: 'Times New Roman', Times, serif;
            padding: 6px;
            background-color: bisque;
        }
        .border1 {
            border: 2px solid rgb(68, 4, 4);
        }
        .border2 {
            border: 2px dotted rgb(68, 4, 4);
        }
        .border3 {
            border: 2px double rgb(68, 4, 4);
        }
        .border4 {
            border: 2px dashed rgb(68, 4, 4);
        }
        .border5 {
            border: 2px ridge rgb(68, 4, 4);
        }
        .border6 {
            border: 2px groove rgb(68, 4, 4);
        }
        .border7 {
            border: 2px outset rgb(68, 4, 4);
        }
        .border8 {
            border: 2px inset rgb(68, 4, 4);
        }
        .border9 {
            border: hidden;
        }
        .border10 {
            border: none;
        }
    </style>
</head>
<body>
    <h3>CSS Border with different border styles</h3>
    <div>
        <p class="border1">We have utilized a solid border style on this element.</p>
        <p class="border2">We have utilized a dotted border style on this element.</p>
        <p class="border3">We have utilized a double border style on this element.</p>
        <p class="border4">We have utilized a dashed border style on this element.</p>
        <p class="border5">We have utilized 3D ridged border style on this element.</p>
        <p class="border6">We have utilized 3D grooved border style on this element.</p>
        <p class="border7">We have utilized 3D outset border style on this element.</p>
        <p class="border8">We have utilized 3D inset border style on this element.</p>
        <p class="border9">We have utilized a hidden border style on this element.</p>
        <p class="border10">We have utilized none, which means no border on this element.</p>
    </div>
</body>
</html>

Output:

Here is the output where we can clearly witness different styles of borders around the HTML elements.

Transparent Border

The transparent border is the border that is there around the element, but it is invisible. Only the background can be seen instead of the border.

There is no particular property of transparent border but we can create a transparent border with the help of rgba or putting the value of color as transparent.

Syntax when using "transparent" value in place of color:

border: border-width border-style border-color;
border: 2px dashed transparent;

The value "transparent" is used in the place of border color in the above-provided syntax.

Syntax when using the "rgba" value in place of color:

border: border-width border-style border-color;
border: 2px dashed rgba(value1, value2, value3, value4);

The value "rgba" is used in the place of border color in the above-provided syntax. The rgba contains four values, which are described below:

Value 1: It is utilized to give the red color from 0% to 100% or 0 to 255.
Value 2: It is utilized to give the green color from 0% to 100% or 0 to 255.
Value 3: It is utilized to give the blue color from 0% to 100% or 0 to 255.
Value 4: It is an alpha parameter utilized to give transparency from 0 to 1.0. If the value of alpha is 0, then it is fully transparent. If the value of alpha is 1.0, then it is fully opaque.

Mostly, the rgba value is utilized when the image border or text border is created.

Demonstrations of the CSS Transparent Border

Now, we will comprehend the CSS transparent border with the help of demonstrations.

Demonstration 1:

We will create a transparent border on the <div> element in this demonstration utilizing the CSS border property and giving the value of color as transparent.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transparent Border</title>
    <style>
        div {
            font-family: 'Times New Roman', Times, serif;
            padding: 5px;
            background-color: aquamarine;
            border: 2px solid transparent;
        }
    </style>
</head>
<body>
    <h3>CSS Transparent Border utilizing the "transparent" keyword</h3>
    <div>
        We have utilized the CSS border property to create a transparent border on this element.
    </div>
</body>
</html>

Output:

Here is the output where we can clearly witness a transparent border around the HTML element.

Demonstration 2:

In this demonstration, we will create a transparent border by utilizing the CSS border property and giving the color value in RGBA.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transparent Border utilizing RGBA value</title>
    <style>
        div {
            font-family: 'Times New Roman', Times, serif;
            padding: 5px;
            background-color: yellowgreen;
            border: 10px solid rgba(200, 200, 200, 0.2);
        }
    </style>
</head>
<body>
    <h3>CSS Transparent Border utilizing the rgba value</h3>
    <div>
        We have given the color value in rgba to the CSS border property for creating a transparent border on this element.
    </div>
</body>
</html>

Output:

Here is the output where we can clearly witness a transparent border on the <div> element.

Demonstration 3:

In this demonstration, we will create an image border using the CSS border property and give the color value in RGBA.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Border utilizing Transparent RGBA value</title>
    <style>
        body {
            height: 100%;
            background-image: url("flower-image.png");
            background-repeat: no-repeat;
        }
        div {
            font-family: 'Times New Roman', Times, serif;
            padding: 55px;
            width: 225px;
            height: 160px;
            border: 36px double rgba(254, 254, 254, 0.6);        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Output:

Here is the output where we can clearly witness an image border.

Browser Support

Following are the browsers that support the CSS border property:

Google Chrome
Opera
Microsoft Edge
Safari
Firefox

Conclusion

We have understood how to construct the CSS transparent border in this article with the help of various demonstrations. We can utilize the transparent keyword or rgba value to create the transparent border.

Next TopicCSS Transparent Button

← prev next →