Os valores para a propriedade border-style são:
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Nós podemos definir as bordas através do atalho border: [size, style, color], exemplo:
border: 1px solid tomato
Podemos aplicar um estilo para cada lado individualmente…
border-top-style: [style]
border-right-style: [style]
border-bottom-style: [style]
border-left-style: [style]
…ou utlizar os atalhos:
/* vertical | horizontal */
border-style: dotted solid;
/* top | horizontal | bottom */
border-style: hidden double dashed;
/* top | right | bottom | left */
border-style: none solid dotted dashed;
O valor tomato refere-se a cor (não confunda).
Eu colori as duas primeiras caixas para você perceber que são realmente uma caixa.
border: 1px none tomatoborder: 1px dotted tomatoborder: 1px dashed tomatoborder: 1px solid tomatoborder: 10px double tomatoborder: 10px groove tomatoborder: 10px ridge tomatoborder: 10px inset tomatoborder: 10px outset tomatoborder: 3px ridge tomato;
border-style: solid dashed;
border: 3px solid tomato;
border-style: none solid dotted dashed;