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

Last update on February 19 2024 13:02: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 color of the right border</title><!-- Sets the title of the HTML document -->
<style type="text/css">  /* Begins a CSS style block */
h1 { /* Defines a CSS rule for all h1 elements */
border-style:solid; /* Sets the border style of the h1 element to solid */
border-width:10px;	 /* Sets the width of the border of the h1 element to 10 pixels */
border-right-color: #22CF64; /* Sets the color of the right border of the h1 element to #22CF64 */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<h1>w3resource Tutorial</h1><!-- Displays the text 'w3resource Tutorial' within an h1 element -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document is structured with essential elements such as html, head, title, style, and body.
CSS is used to style all h1 elements, specifying that they should have a solid border.
Additionally, the width of the border of h1 elements is set to 10 pixels.
The color of the right border of h1 elements is set to #22CF64, a shade of green.
The text "w3resource Tutorial" is displayed within an h1 element.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page