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 >
|
Output:
border hidden with internal CSS
Share your thoughts in the comments
Please Login to comment...