CSS Properties: How to specify the hidden border?

Last update on February 16 2024 13:18:36 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the hidden border</title><!-- Title of the HTML document -->
<style type="text/css">/* CSS style start*/
h1.hidden {
border-width: 10px; /* Setting border width to 10 pixels for elements with class "hidden" */
border-style: hidden; /* Setting border style to "hidden" for elements with class "hidden" */
Border-color: #CC63FF /* Setting border color to #CC63FF for elements with class "hidden" */
}
</style>
</head>
<body>
<h1 class="hidden">Hidden border style</h1><!-- Heading with class "hidden" -->
</body>
</html>

Explanation:

This HTML document demonstrates how to specify a hidden border for an element using CSS.
The CSS style block defines styling for elements with class "hidden".
border-width: 10px; sets the border width to 10 pixels for elements with class "hidden".
border-style: hidden; sets the border style to "hidden" for elements with class "hidden".
border-color: #CC63FF; sets the border color to #CC63FF (a shade of purple) for elements with class "hidden".
The HTML content consists of a <h1> heading with class "hidden", demonstrating the specified hidden border style.
The hidden border style will not be visible on the element, but the border is still present and affects the layout of the element.

Live Demo:

See the Pen border-style-hidden-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page