La proprietà border di CSS permette di specificare lo stile, la dimesione ed il colore del bordo applicato a un elemento.

Stile del bordo

La proprietà border-style serve a controllare l'aspetto del bordo:

border-style: dashed

border-style: dotted

border-style: double

border-style: groove

border-style: inset

border-style: outset

border-style: ridge

border-style: solid

Altre caratteristiche del bordo

Le proprietà border-color, border-width e border-radius servono ad impostare il colore, lo spessore e l'arrotondamento degli angoli di un bordo:

border-color: blueviolet

border-width: 5px

border-radius: 12px

Versione abbreviata

Le proprietà border-width, border-style e border-color possono essere specificate in forma abbreviata attraverso il comando border oppure border-top, border-bottom, border-left o border-right:

border: 1px solid red

border-top: 4px dotted green

border-left: 6px double magenta

Outline

Un outline è una linea che circonda un elemento e che è solitamente posta all'esterno del bordo. A differenza del bordo, lo spessore dell'outline non va a modificare le dimensioni totali del box dell'elemento. In pratica appare come un secondo bordo, indipendente da quello principale.

border: 4px double magenta
outline: 4px solid red;
outline-offset: 5px;

La proprietà outline-offset imposta la distanza tra il bordo e l'outline ed accetta anche valori negativi. In questo caso il secondo bordo sarà tracciato all'interno di quello principale.