CSS Properties: How to specify the style of the border?
Solution:
HTML Code:
<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the style of the border</title><!-- Title of the HTML document -->
<style type="text/css">/* CSS style start*/
h1.abc {border-style: none;} /* Setting border style to "none" for elements with class "abc" */
h1.dotted {border-style: dotted;} /* Setting border style to "dotted" for elements with class "dotted" */
h1.dashed {border-style: dashed;} /* Setting border style to "dashed" for elements with class "dashed" */
h1.solid {border-style: solid;} /* Setting border style to "solid" for elements with class "solid" */
h1.double {border-style: double;} /* Setting border style to "double" for elements with class "double" */
h1.groove {border-style: groove;} /* Setting border style to "groove" for elements with class "groove" */
h1.ridge {border-style: ridge;} /* Setting border style to "ridge" for elements with class "ridge" */
h1.inset {border-style: inset;} /* Setting border style to "inset" for elements with class "inset" */
h1.outset {border-style: outset;} /* Setting border style to "outset" for elements with class "outset" */
h1.hidden {border-style: hidden;} /* Setting border style to "hidden" for elements with class "hidden" */
h1.initial {border-style: initial;} /* Setting border style to "initial" for elements with class "initial" */
</style>
</head>
<body>
<h1 class="none">No border style</h1><!-- Heading with class "none" -->
<h1 class="dotted">A dotted border style</h1><!-- Heading with class "dotted" -->
<h1 class="dashed">A dashed border style</h1><!-- Heading with class "dashed" -->
<h1 class="solid">A solid border style</h1><!-- Heading with class "solid" -->
<h1 class="double">A double border style</h1><!-- Heading with class "double" -->
<h1 class="groove">A groove border style</h1><!-- Heading with class "groove" -->
<h1 class="ridge">A ridge border style</h1><!-- Heading with class "ridge" -->
<h1 class="inset">An inset border style</h1><!-- Heading with class "inset" -->
<h1 class="outset">An outset border style</h1><!-- Heading with class "outset" -->
<h1 class="hidden">A hidden border style</h1><!-- Heading with class "hidden" -->
<h1 class="initial">A initial border style, like as no border</h1><!-- Heading with class "initial" -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to specify different styles of borders using CSS.
- The CSS style block defines styling for different classes of <h1> elements.
- For each class (abc, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, initial):
- border-style property is set to a specific style value to define the border style.
- The HTML content consists of <h1> elements with different classes, each demonstrating a different border style.
Explanation:
- This HTML document demonstrates how to specify different styles of borders using CSS.
- The CSS style block defines styling for different classes of heading elements.
- For each class (abc, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, initial):
- border-style property is set to a specific style value to define the border style.
- The HTML content consists of headings (<h1>) with different classes, each demonstrating a different border style.
Live Demo:
See the Pen border-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.