Introduction to CSS Transparent Border

CSS Transparent border means that the behind object can be seen if we apply the border as transparent or rgba. Transparent border property beautifies the HTML page by making behind objects distinctly visible.

Real-time scenario: If any web page wants image border or text border wants to be transparent, then without any doubt we use the transparent property or rgba property.

History of Transparent keyword in CSS

Transparent keyword was first introduced in CSS1 version.
Transparent keyword can be used for background color and border.

How does Transparent Border Work in CSS?

The transparent border is applied by using transparent keyword and also rgba property.
If we take border as transparent then the entire border will disappear and the background will display in place of the border.
If we take border as rgba then we can set how much background we wish to see.
Most of the time applied with images for accuracy.

Syntax 1:

div
{
border: value1 value2 transparent;//border values
}

Value1: Sets the border size like 2px, 3px, 4px etc. values
Value2: Sets the border type like solid, dashed, double, groove, ridge, dotted etc.
Transparent: Makes the background visible.

Syntax 2:

div
{
border: value1 value2 rgba(value1, value2, value3, value4);//border values
}

Value1: Gives red color between 0 to 255 or 0 to 100%
Value2: Gives green color between 0 to 255 or 0 to 100%
Value3: Gives blue color between 0 to 255 or 0 to 100%
Value4: It’s an alpha parameter that gives transparency between 0 to 1. 0 means fully transparent and 1 means fully opaque.

Examples of CSS Transparent Border

Given below are the examples of CSS Transparent Border:

Example #1

Transparent with Paragraphs.

HTML Code: TransparentParagraphText.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TransparentParagraphText.css">
<title>Transparent border</title>
</head>
<body>
<font color="green"><h2 align="center">Transparent
Paragraph Conclusion</h2></font>
<p class="style1" align="center">Developed an Enterprise Content
Management online application by using Spring MVC as Back end and JSP,
HTML, CSS, JavaScript and Angular JS as Front end.</p>
<p class="style2" align="center">Create a user with user type and
admin type, where admin can allow to perform administration actions
like modify user type and delete the users.</p>
<p class="style3" align="center">User can import a task with any
document, it stores in oracle database, create a task by specific data
with comments for task description. Assign same task to other users to
perform actions on it and also multiple users can at a time assign a
task.</p>
</body>
</html>

CSS Code: TransparentParagraphText.css

.style1
{
width: 900px;
background: gray;
border: 20px double transparent;
font-size: 20px;
text-align: justify;
}
.style2
{
width: 900px;
background:aqua;
border: 20px double transparent;
font-size: 20px;
text-align: justify;
}
.style3
{
width: 900px;
background: fuchsia;
border: 20px double transparent;
font-size: 20px;
text-align: justify;
}
body
{
background: maroon;
}

Output:

Explanation:

As you can see the above output, if we are taking border without transparent background color gray is visible, but if we take border with transparent then background gray color is visible.
Why border is not visible in second output because it was overridden by transparent keyword, it is the border that place background gray color visible.

Example #2

Transparent by rgba property with image.

HTML Code: TransparentImageCircleText.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TransparentImageCircleText.css">
<title>Transparent border</title>
</head>
<body>
<font color="brown"><h2>Transparent Image
Circle</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>

CSS Code: TransparentImageCircleText.css

.image
{
width: 200px;
height: 200px;
padding: 55px;
border-radius: 300px; /* for getting circle shape */
border: double 15px rgba(254,254,254,0.7);
background: rgba(254,254,254,0.7);
}
body
{
background: url("p3.jpg");
height: 100%;
}

Output after applying transparent:

Explanation:

As you can see from the above output, if we are taking a border with transparent(rgba)background, the image is visible from the top of the circle shape.

Note: Transparent can also be achieved by rgba property.

Example #3

Transparent by rgba property with the image.

HTML Code: TransparentImageSquare.html

<!DOCTYPE html>
&codelt;html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TransparentImageSquare.css">
<title>Transparent border</title>
</head>
<body>
<font color="brown"><h2>Transparent Image
Square</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>

CSS Code: TransparentImageSquare.css

.image
{
height: 400px;
width: 400px;
margin: 120px;
border: 15px double rgba(255,255,255,.7);
}
body
{
background: url("p4.jpg");
background-size: 100% 100%; /*makes image displayed in entire page*/
}

Output after applying transparent:

Explanation:

As you can see the above output, if we are taking a border with transparent(rgba)background, the image is visible from the top of the square shape.

Note: Transparent can also be achieved by rgba property.

Example #4

Transparent by rgba property with image.

HTML Code: TransparentImageEllips.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TransparentImageEllipse.css">
<title>Transparent border</title>
</head>
<body>
<font color="brown"><h2>Transparent Image
Square</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>

CSS Code: TransparentImageEllips.css

.image
{
width: 400px;
height: 200px;
border-radius: 200px/150px;
padding:50px;
margin: 120px;
border: 15px double rgba(255,255,255,.7);
}
body
{
background: url("p5.jpg");
background-size: 100% 100%; /*makes image displayed in entire page*/
}

Output after applying transparent:

Transparent Border in CSS 4

Explanation:

As you can see from the above output, if we are taking a border with transparent(rgba)background, the image is visible from the top of the ellipse shape.

Note: Transparent can also be achieved by rgba property.

Example #5

Transparent by rgba property with image.

HTML Code: TransparentImageParallogram.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TransparentImageParallogram.css">
<title>Transparent border</title>
</head&gt
<body>
<font color="brown"><h2>Transparent Image
Parallelogram</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>

CSS Code: TransparentImageParallogram.css

.image {
width: 250px;
height : 150px;
transform : skew( 30deg);
padding: 50px;
margin: 120px;
border: 15px double rgba(230, 230, 230, .7);
height: 150px;
transform: skew(30deg);
}
body {
background: url("p3.jpg");
background-size: 100% 100%; /*makes image displayed in entire page*/
}

Output After applying transparent(rgba):

Transparent image

Explanation:

As you can see the above output, if we are taking a border with transparent(rgba)background, the image is visible from the top of the parallelogram shape.

Note: Transparent can also be achieved by rgba property.