Loading

Border Style

  • In CSS, the border-style property is used to specify the style of the border around an element. 
  • The border-style property can accept one or multiple values, each of which corresponds to a border side.

Syntax:

selector {
border-style: value;
}

Values for the border-style property include

  • Solid: Creates a solid line border.
border-style: solid;
  • Dotted: Creates a series of small dots as the border.
border-style: dotted;
  • Dashed: Creates a series of short dashes as the border.
border-style: dashed;
  • Double: Creates a double-line border.
border-style: double;
  • Groove: Creates a three-dimensional, grooved border.
border-style: groove;
  • Ridge: Creates a three-dimensional, ridged border.
border-style: ridge;
  • Inset: Creates a three-dimensional, inset border.
border-style: inset;

CSS  properties to control the style of an element:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: dashed;
            border-left-style: double;
            border-width: 5px;
            padding: 2em;
        }
    </style>
</head>

<body>
    <h2>border-style (single-side)</h2>
    <p>Welcome to Quipoin </p>
</body>

<html>

Output: