How to create a hidden border using CSS properties ?
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:
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 > |
Output:
Contact Us