CSS Properties: How to set the width of the four borders?

Last update on February 20 2024 12:25:10 (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 specify the width of the four border</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
h1.xyz{border-style: solid; /* Defines a CSS rule for h1 elements with class "xyz" */
border-top-width: 1px; /* Sets the top border width to 1px */
}
h1.xyz1 { /* Defines a CSS rule for h1 elements with class "xyz1" */
border-style: solid; /* Sets the border style to solid */
border-width: medium; /* Sets the border width to medium */
}
h1.xyz2 { /* Defines a CSS rule for h1 elements with class "xyz2" */
border-style: solid; /* Sets the border style to solid */
border-width: 10px; /* Sets the border width to 10px */
}
</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 text "w3resource Tutorial" -->
<h1 class="xyz">HTML5</h1><!-- Displays an h1 element with class "xyz" and text "HTML5" -->
<h1 class="xyz1">JavaScript</h1><!-- Displays an h1 element with class "xyz1" and text "JavaScript" -->
<h1 class="xyz2">PHP & others</h1><!-- Displays an h1 element with class "xyz2" and text "PHP & others" -->
<p><b>Note:</b> The border-width property does not work alone.</p><!-- Displays a paragraph with a note -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

Three CSS rules are defined for
elements with different classes (xyz, xyz1, xyz2).
Each rule sets the border style to solid.
The first rule (h1.xyz) sets the top border width to 1 pixel.
The second rule (h1.xyz1) sets the border width to medium, but note that border-width property alone does not define all four borders.
The third rule (h1.xyz2) sets the border width to 10 pixels.
These rules are applied to
elements with corresponding classes in the HTML body.
A note is provided to clarify that the border-width property does not work alone to define all four borders.

Live Demo:

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

See the solution in the browser

Supported browser