CSS Properties: How to sets all the border properties in one declaration?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to sets all the border properties in one declaration</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
h1.xyz {
border-style: solid; /* Setting border style to solid for elements with class "xyz" */
border-width: 1px; /* Setting border width to 1 pixel for elements with class "xyz" */
}
h1.xyz1 {
border-style: solid; /* Setting border style to solid for elements with class "xyz1" */
border-width: medium; /* Setting border width to medium for elements with class "xyz1" */
}
h1.xyz2 {
border-style: solid; /* Setting border style to solid for elements with class "xyz2" */
border-width: 5px; /* Setting border width to 5 pixels for elements with class "xyz2" */
}
</style>
</head>
<body>
<h1 class="xyz">w3resource JavaScript Tutorial.</h1><!-- Heading with class "xyz" -->
<h1 class="xyz1">w3resource Python Tutorial</h1><!-- Heading with class "xyz1" -->
<h1 class="xyz2">w3resource Redis Tutorial.</h1><!-- Heading with class "xyz2" -->
<p><b>Note:</b> The default value is medium none color.</p><!-- Note about default border values -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set all the border properties in one declaration using CSS.
The CSS style block defines styling for different classes of heading elements.
For each class (xyz, xyz1, xyz2):

border-style: solid; sets the border style to solid.
border-width is set to different values (1px, medium, 5px) to demonstrate different border widths.