How to create a hidden border using CSS properties ?

Last Updated : 22 May, 2023

In this article, we will learn how to create a hidden border using CSS properties.

In the following examples, both inline styling and style definition is used in the head section to define the hidden border.

Approach:

We will use two headings in which one will show the border color and the other will not show because it will be hidden using CSS.
The CSS that we will use is inside the tags also known as inline CSS.
The property used will be border–style: hidden.

Example 1: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hidden border</title>
</head>
 
<body>
    <h1 style="border-color:red  ;
            border-style:hidden ;">
        GFG Is best for Interview Preparation And Much More
      </h1>
    <h1 style="border-color:red ;
            border-style:solid ;">
        GFG Is best for Interview Preparation And Much More
      </h1>
</body>
</html>

Output:

border hidden

Approach 2:

We will use two headings in which one will show the border color and the other will not show because it will be hidden using CSS.
The CSS that we will use is inside the style tag also known as Internal CSS which is applied to elements like h1, and h2.
The property that we will use is border-style: hidden.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            border-color: orange;
            border-style: hidden;
        }
 
        h2 {
            border-color: orange;
            border-style: solid;
        }
    </style>
    <title>Hidden border</title>
</head>
 
<body>
    <h1>GFG Is best for Interview Preparation And Much More</h1>
    <h2>GFG Is best for Interview Preparation And Much More</h2>
</body>
</html>