CSS Data Type - <line-style>

<line-style> data type represents the keywords values specifying a line style or lack of line.

The <line-style> keywords are used in the following listed border and column properties:

Possible values

One of the following values is used to specify the <line-style> enumerated type:

none - No line is displayed.
hidden - It is similar to none value, displays no line. An element with a hidden display option won't show any lines (even with width value being specified.). Conflicting borders are concealed when hidden takes precedence, as in the case of table cells or border collapse.
dotted - Displays a series of round dots.
dashed - It displays a series of short square-ended dashes or line segments.
solid - This design displays a single, uninterrupted, solid line that never breaks.
double - Displays two straight, parallel lines that are spaced apart by a predetermined amount, and the total length of both lines is equal to the line's width in pixels.
groove - Displays a border with a carved appearance..
ridge - Displays a border with an extruded appearance.
inset - Displays a border that makes the element appear embedded. It acts as a groove style when applied to a table cell border with a collapsed border-collapse setting.
outset - It displays a border style that elevates or raises the element's look. It functions similarly to a ridge style when used in a table cell with border-collapse set to collapsed.

Syntax

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

CSS <line-style> - Defining Line Styles.

The <line-style> values in the following example correspond exactly to CSS properties like border-style, which define different border appearances like none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

These <line-style> descriptions provide a wide range of stylistic choices for HTML components, and they tightly regulate how borders appear visually.

 
<html>
<head>
<style>
   div {
      display: inline-block;
      margin: 5px;
      padding: 5px;
   }
   p {
      margin: 5px;
      font-weight: bold;
      padding: 5px;
      border: double 7px #44ebb3;
   }
   p + p {
      columns: 2;
      column-gap: 10px;
      column-rule: double 7px;
      border-color: #727876;
   }
   .no-border p {
      border-style: none;
   }
   .hidden-border p {
      border-style: hidden;
   }
   .dotted-border p {
      border-style: dotted;
   }
   .dashed-border p {
      border-style: dashed;
   }
   .solid-border p {
      border-style: solid;
   }
   .double-border p {
      border-style: double;
   }
   .groove-border p {
      border-style: groove;
   }
   .ridge-border p {
      border-style: ridge;
   }
   .inset-border p {
      border-style: inset;
   }
   .outset-border p {
      border-style: outset;
   }
</style>
</head>
<body>
<div class="no-border">
   <p>no-border</p>
   <p>This is an example of no border</p>
</div>
<div class="hidden-border">
   <p>hidden-border</p>
   <p>This is an example of hidden border</p>
</div>
<div class="dotted-border">
   <p>dotted-border</p>
   <p>This is an example of dotted border</p>
</div>
<div class="dashed-border">
   <p>dashed-border</p>
   <p>This is an example of dashed border</p>
</div>
<div class="solid-border">
   <p>solid-border</p>
   <p>This is an example of solid border</p>
</div>
<div class="double-border">
   <p>double-border</p>
   <p>This is an example of double border</p>
</div>
<div class="groove-border">
   <p>groove-border</p>
   <p>This is an example of groove border</p>
</div>
<div class="ridge-border">
   <p>ridge-border</p>
   <p>This is an example of ridge border</p>
</div>
<div class="inset-border">
   <p>inset-border</p>
   <p>This is an example of inset border</p>
</div>
<div class="outset-border">
   <p>outset-border</p>
   <p>This is an example of outset border</p>
</div>
</body>
</html>

CSS <line-style> - Defining Line Style and Colors

The <line-style> indicates the various border styles that are used in the following example.
Every line style has a corresponding border-color feature that displays a range of colors.
This illustrates the variety of border looks that may be achieved by combining different styles and color combinations.

 
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
   .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      margin-top: 20px;
   }
   .box {
      width: 200px;
      padding: 20px;
      margin: 10px;
   }
   p {
      margin: 5px;
      font-weight: bold;
      padding: 5px;
      border: double 7px #44ebb3;
   }
   .line-example {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
   }
   .line-example .box {
      flex: 1;
      margin: 10px;
   }
   .line-example p {
      font-weight: normal;
      padding: 10px;
      margin: 0;
   }
   .dotted-border p {
      border-style: dotted;
      border-color: #FF5733; /* Orange */
   }
   .dashed-border p {
      border-style: dashed;
      border-color: #2E86C1; /* Blue */
   }
   .solid-border p {
      border-style: solid;
      border-color: #58D68D; /* Green */
   }
   .double-border p {
      border-style: double;
      border-color: #D4AC0D; /* Yellow */
   }
   .groove-border p {
      border-style: groove;
      border-color: #9B59B6; /* Purple */
   }
   .ridge-border p {
      border-style: ridge;
      border-color: #E74C3C; /* Red */
   }
   .inset-border p {
      border-style: inset;
      border-color: #3498DB; /* Light Blue */
   }
   .outset-border p {
      border-style: outset;
      border-color: #27AE60; /* Dark Green */
   }
</style>
</head>
<body>
<div class="container">
<div class="box dotted-border">
   <p>Dotted</p>
   <p>This is an example of dotted line</p>
</div>
<div class="box dashed-border">
   <p>Dashed</p>
   <p>This is an example of dashed line</p>
</div>
<div class="box solid-border">
   <p>Solid</p>
   <p>This is an example of solid line</p>
</div>
<div class="box double-border">
   <p>Double</p>
   <p>This is an example of double line</p>
</div>
<div class="box groove-border">
   <p>Groove</p>
   <p>This is an example of groove line</p>
</div>
<div class="box ridge-border">
   <p>Ridge</p>
   <p>This is an example of ridge line</p>
</div>
<div class="box inset-border">
   <p>Inset</p>
   <p>This is an example of inset line</p>
</div>
<div class="box outset-border">
   <p>Outset</p>
   <p>This is an example of outset line</p>
</div>
</div>
</body>
</html>