How can a border style, width and color be combined in a single attribute?

The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

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

This property is a shorthand for the following CSS properties:

• border-width
• border-style
• border-color

Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties:

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

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