CSS can be used to create borders around HTML elements. The CSS **`border-style` property** is used to specify a uniform-styled border around an element. 

# Syntax
Let's take a look at the general syntax of the `border-style` property:

# How does it work? 

The `border-style` property sets the border on all **four** sides of an element. Therefore, this function can take a number of different input keyword values. 

Let's take a look at all the possible variants:

**1. border-style: value-1**

When one value is specified, the same style is applied to **all four** sides of the element.

**2. border-style: value-1 value-2**

When two values are specified the first style is applied to the **top and bottom** borders, while  the second style is applied to the **left and right** borders.

**3. border-style: value-1 value-2 value-3**

When three values are specified the first style is applied to the **top** border, the second to the **left and right** borders,and the third to the **bottom** border.

**4. border-style: value-1 value-2 value-3 value-4**

When four values are specified the styles, starting from the top, are applied to **each** side clockwise (i.e.the top, right, bottom and left).


Here, **keyword-value** specifies which border style is to be displayed. The following values are permissible:


# Example
Now that we are familiar with the syntax and purpose of the `border-style` property, let's see how it works:


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Different Border Styles</h1>
No border.
A hidden border.
A dotted border.
A solid border.
A dashed border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.

</body>
</html>

codemirror

Let's see the results if we give multiple values as inputs to the `border-style` property:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Different Border Styles</h1>
The top and bottom borders will be dotted whereas the left and right ones will be double.
There will be no border on the top, a groove border on the left and right sides and a dashed border on the bottom.
There will be a dotted border on the top, a dashed border on the right, inset border on the bottom and a ridge border on the left.

</body>
</html>

How to set the border using the CSS border-style property

CSS can be used to create borders around HTML elements. The CSS border-style property is used to specify a uniform-styled border around an element. Syntax Let s take a look at the general syntax of the border-style property: 