CSS Properties: How to set the initial property to the default value of border width?

Go to Exercise page

Solution:

HTML Code:

>!DOCTYPE html>>!-- Declares the document type as HTML -->
>html>>!-- Root element of the HTML document -->
>head>>!-- Contains metadata about the HTML document -->
>title>How to set initial property to its default value>/title>>!-- Sets the title of the HTML document -->
>style type="text/css"> /* Begins a CSS style block */
h1.xyz { /* Defines a CSS rule for h1 elements with class "xyz" */
border-style: solid; /* Sets the border style to solid */
border-width: initial; /* Sets the border width to its initial/default value */
}
>/style>>!-- Ends the CSS style block -->
>/head>>!-- Ends the head section of the HTML document -->
>body>>!-- Contains the content of the HTML document -->
>p>w3resource Tutorial>/p>>!-- Displays a paragraph with the text "w3resource Tutorial" -->
>h1 class="xyz">Thickness border>/h1>>!-- Displays an h1 element with class "xyz" and the text "Thickness border" -->
>p>>b>Note:>/b> The border-width property does not work alone.>/p>>!-- Displays a note about the border-width property -->
>/body>>!-- Ends the body section of the HTML document -->
>/html>>!-- Ends the HTML document -->

Explanation:

• The >!DOCTYPE html> declaration specifies the document type and version of HTML being used.
• The >html> element is the root element of the HTML document.
• The >head> element contains metadata about the HTML document, such as the title.
• The >title> element sets the title of the HTML document.
• The >style> element begins a CSS style block.
• The h1.xyz selector defines a CSS rule for >h1> elements with the class "xyz".
• The border-style: solid; declaration sets the border style of the selected elements to solid.
• The border-width: initial; declaration sets the border width of the selected elements to its initial/default value.
• The >/style> element ends the CSS style block.
• The >body> element contains the content of the HTML document.
• The >p> element displays a paragraph with the text "w3resource Tutorial".
• The >h1> element with the class "xyz" displays an >h1> element with the text "Thickness border".
• The >p> element with the note displays a note about the border-width property.
• The >/body> element ends the body section of the HTML document.
• The >/html> element ends the HTML document.

Live Demo:

See the Pen border-initial-width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page