CSS Properties: How to specify the color of the border?
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):
- border-style property is set to define the border style.
- border-width property is set to define the border width.
- border-color property is set to define the border color.
- The HTML content consists of headings (<h1>) with different classes, each demonstrating a different border style and color.
Live Demo:
See the Pen border-color-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics