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

Last update on February 17 2024 12:46:54 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the color of the four borders</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
h1.xyz {
border-style: solid; /* Sets the border style to solid for the class xyz */
border-color: #CC63FF; /* Sets the border color to #CC63FF (a shade of purple) for the class xyz */
}
h1.xyz1 {
border-style: solid; /* Sets the border style to solid for the class xyz1 */
border-color: #CC63FF #FF63CC; /* Sets the border color to #CC63FF (purple) for the top and bottom borders, and #FF63CC (pink) for the left and right borders for the class xyz1 */
}
h1.xyz2 {
border-style: solid; /* Sets the border style to solid for the class xyz2 */
border-color: #CC63FF #FF63CC #FFCC63; /* Sets the border color to #CC63FF (purple) for the top border, #FF63CC (pink) for the right border, #FFCC63 (yellow) for the bottom border, and uses the default color (black) for the left border for the class xyz2 */
}
h1.xyz3 {
border-style: solid; /* Sets the border style to solid for the class xyz3 */
border-color: #CC63FF #FF63CC #FFCC63 rgb(108,205,155); /* Sets the border color to #CC63FF (purple) for the top border, #FF63CC (pink) for the right border, #FFCC63 (yellow) for the bottom border, and rgb(108,205,155) (a shade of green) for the left border for the class xyz3 */
}
</style>
</head>
<body>
<h1 class="xyz">w3resource HTML5 Tutorial</h1><!-- Heading with class xyz -->
<h1 class="xyz1">w3resource JavaScript Tutorial.</h1><!-- Heading with class xyz1 -->
<h1 class="xyz2">w3resource Python Tutorial</h1><!-- Heading with class xyz2 -->
<h1 class="xyz3">w3resource Redis Tutorial.</h1><!-- Heading with class xyz3 -->
<p><b>Note:</b> The default value is medium none color.</p><!-- Note indicating the default value -->
</body>
</html>

Explanation:

This HTML document demonstrates different ways to set the color of borders using CSS.
Four different classes (xyz, xyz1, xyz2, xyz3) are defined, each with a different border color.
border-style: solid; sets the border style to solid for all classes.
border-color property sets the color of the borders.
Different combinations of colors (hexadecimal, rgb) are used to define border colors for each class.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page