CSS Properties: How to specify the color of the border?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the color of the border</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
h1.solid {
border-style: solid; /* Setting border style to solid for elements with class "solid" */
border-width: 5px; /* Setting border width to 5 pixels for elements with class "solid" */
border-color: #CC63FF; /* Setting border color to #CC63FF (purple) for elements with class "solid" */
}
h1.dotted {
border-style: dotted; /* Setting border style to dotted for elements with class "dotted" */
border-width: medium; /* Setting border width to medium for elements with class "dotted" */
border-color: #CF633F; /* Setting border color to #CF633F (orange) for elements with class "dotted" */
}
h1.dashed {
border-style: dashed; /* Setting border style to dashed for elements with class "dashed" */
border-width: 5px; /* Setting border width to 5 pixels for elements with class "dashed" */
border-color: #DC63CF; /* Setting border color to #DC63CF (pink) for elements with class "dashed" */
}
</style>
</head>
<body>
<h1 class="solid">w3resource JavaScript Tutorial.</h1><!-- Heading with class "solid" -->
<h1 class="dotted">w3resource Python Tutorial</h1><!-- Heading with class "dotted" -->
<h1 class="dashed">w3resource Redis Tutorial.</h1><!-- Heading with class "dashed" -->
<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 specify the color of the border using CSS.
The CSS style block defines styling for different classes of heading elements.
For each class (solid, dotted, dashed):