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.
Let’s take a look at the general syntax of 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:
Now that we are familiar with the syntax and purpose of the
border-style property, let’s see how it works:
Let’s see the results if we give multiple values as inputs to the