How can border styles be applied to a box?

The border-style shorthand CSS property sets the line style for all four sides of an element's border.

/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

This property is a shorthand for the following CSS properties:

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

The border-style property may be specified using one, two, three, or four values.

💡

If no border style is specified, the border does not exists. We must always declare the style of border, or the other border properties will be ignored.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style