CSS border-style

The CSS border-style property is used to specify the style of the border of an element. This property can take different values to create different styles of borders, such as solid, dashed, dotted, double, etc.

Here are some of the common values that can be used with the border-style property:

  1. solid: A solid line border.
  2. dashed: A dashed line border.
  3. dotted: A dotted line border.
  4. double: A double line border.
  5. groove: A 3D grooved border.
  6. ridge: A 3D ridged border.

Let's see some examples of how to use the border-style property in CSS:

Result: 

    .solid-border {
      border-style: solid;
      border-width: 2px;
    }

    .dashed-border {
      border-style: dashed;
      border-width: 2px;
    }

    .dotted-border {
      border-style: dotted;
      border-width: 2px;
    }
This is a solid border.
This is a dashed border.
This is a dotted border.

In the example above, we have created three different div elements with different border styles. Each div has a border style applied using the border-style property in CSS.

You can also combine the border-style property with other border properties like border-width and border-color to create custom border styles for your elements.

Experiment with different values of the border-style property to create unique border effects for your elements.