Skip to content
Related Articles

Related Articles

Improve Article

How to create a hidden border using CSS properties ?

  • Last Updated : 31 Mar, 2021

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 are 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 borderstyle: hidden.

Example 1:

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 on elements like h1, h2.
  • The property that we will use border-style: hidden.

 Example:

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>

Output:

border hidden with internal CSS




My Personal Notes arrow_drop_up
Recommended Articles
Page :