CSS Properties: How to define the thickness of the border?

Last update on February 20 2024 12:25:08 (UTC/GMT +8 hours)

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 define the thickness of the 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-width: 20px; /* Sets the border width to 20 pixels */
}
</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: 20px; declaration sets the border width of the selected elements to 20 pixels.
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-length-width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page