CSS Properties: How to set the style of the left border?
Solution:
HTML Code:
<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the style of the left border</title><!-- Title of the HTML document -->
<style>
/* CSS styling */
h1 {
border-style: solid; /* Sets the border style for h1 elements to solid */
border-width: 3px; /* Sets the border width for h1 elements to 3 pixels */
}
h1.none {border-left-style: none;} /* Defines a class for h1 elements with no left border */
h1.dotted {border-left-style: dotted;} /* Defines a class for h1 elements with a dotted left border */
h1.dashed {border-left-style: dashed;} /* Defines a class for h1 elements with a dashed left border */
h1.solid {border-left-style: solid;} /* Defines a class for h1 elements with a solid left border */
h1.double {border-left-style: double;} /* Defines a class for h1 elements with a double left border */
h1.groove {border-left-style: groove;} /* Defines a class for h1 elements with a groove left border */
h1.ridge {border-left-style: ridge;} /* Defines a class for h1 elements with a ridge left border */
h1.inset {border-left-style: inset;} /* Defines a class for h1 elements with an inset left border */
h1.outset {border-left-style: outset;} /* Defines a class for h1 elements with an outset left border */
</style>
</head>
<body>
<h1 class="none">No left border.</h1><!-- h1 element with no left border -->
<h1 class="dotted">A dotted left border.</h1><!-- h1 element with a dotted left border -->
<h1 class="dashed">A dashed left border.</h1><!-- h1 element with a dashed left border -->
<h1 class="solid">A solid left border.</h1><!-- h1 element with a solid left border -->
<h1 class="double">A double left border.</h1><!-- h1 element with a double left border -->
<h1 class="groove">A groove left border.</h1><!-- h1 element with a groove left border -->
<h1 class="ridge">A ridge left border.</h1><!-- h1 element with a ridge left border -->
<h1 class="inset">An inset left border.</h1><!-- h1 element with an inset left border -->
<h1 class="outset">An outset left border.</h1><!-- h1 element with an outset left border -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to set different styles for the left border of h1 elements using CSS classes.
- Each h1 element has a common style with a solid border and a width of 3 pixels.
- Additional CSS classes are defined to specify different styles for the left border:
- none: No left border
- dotted: Dotted left border
- dashed: Dashed left border
- solid: Solid left border
- double: Double left border
- groove: Groove left border
- ridge: Ridge left border
- inset: Inset left border
- outset: Outset left border
- Each h1 element is assigned one of these classes to apply the corresponding left border style.
Live Demo:
See the Pen border-left-style-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.