CSS Properties: How to specify a thick top border?

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 specify a thick top border>/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-top-width: thick; /* Sets the top border width to thick */
}
>/style>>!-- Ends the CSS style block -->
>/head>>!-- Ends the head section of the HTML document -->
>body>>!-- Contains the content of the HTML document -->
>h1 class="xyz">w3resource Tutorial>/h1>>!-- Displays an h1 element with class "xyz" -->
>p>>b>Note:>/b> The default value is medium none color.>/p>>!-- Displays a note about the default border width -->
>/body>>!-- Ends the body section of the HTML document -->
>/html>>!-- Ends the HTML document -->

Explanation:

• The HTML document structure includes essential elements such as html, head, title, style, and body.
• CSS rules are defined to set the border style to solid and the top border width to thick for h1 elements with class "xyz".
• A note is provided in the content explaining that the default value for the top border width is medium, with no border color.
• Comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page