English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il bordo del (Border) del elemento circonda il riempimento e il contenuto.
L'attributo di cornice CSS ti permette di definire l'area del bordo del riquadro. Il bordo può essere uno stile predefinito, ad esempio una linea continua, una linea a doppio tratto, una linea tratteggiata, ecc.può essere anche un'immagineLa prossima sezione illustrerà come impostare vari attributi per definire lo stile del bordo (border-style), il colore (border-color) e lo spessore (border-width).
border-widthL'attributo specifica la larghezza dell'area del bordo. È un attributo di abbreviazione utilizzato per impostare contemporaneamente lo spessore di tutti e quattro i lati del riquadro.
p {
border-width: medium 10px thick 15px;
}Prova a vedere‹/›Nota:Se border-width manca o non è specificato il valore dell'attributo, border-width utilizzerà il valore predefinito (medium).
Questoborder-styleL'attributo definisce lo stile della cornice del riquadro, ad esempio: solid, dotted ecc. È un attributo di abbreviazione utilizzato per impostare il tipo di linea di tutti e quattro i lati del riquadro.
L'attributo border-style può accettare uno dei seguenti valori: none, hidden, dashed, dotted, double, groove, inset, outset, ridge e solid.
none: non ci sono bordi.
dotted: definisce una cornice tratteggiata
dashed: definisce una cornice tratteggiata
solid: definisce una cornice continua
double: definisce due cornici. La larghezza delle cornici è la stessa del valore di border-width
groove: definisce il bordo a scarpata 3D. L'effetto dipende dal valore del colore del bordo
ridge: definisce il bordo a cresta 3D. L'effetto dipende dal valore del colore del bordo
inset: definisce il bordo integrato 3D. L'effetto dipende dal valore del colore del bordo
outset: definisce il bordo iniziale 3D. L'effetto dipende dal valore del colore del bordo
p {
border-style: dotted;
}Prova a vedere‹/›Questoborder-colorProprietà specificatacolorIl bordo della scatola. È anche l'attributo di abbreviazione utilizzato per impostare il colore di tutti e quattro i lati del bordo dell'elemento.
p {
border-style: solid;
border-color: #ff0000;
}Prova a vedere‹/›Nota:border-color Se utilizzato singolarmente, questo attributo non avrà alcun effetto. Utilizzare prima l'attributo border-style per impostare il bordo.
Questoborder L'attributo CSS è un attributo di abbreviazione che imposta un o più attributi di bordo singoli in una regola singola: border-style, border-width e border-color.
p {
border: 5px solid #ff4500;
}Prova a vedere‹/›Se si ignora o non si specifica il valore di un singolo attributo border durante la configurazione dell'attributo di brevettazione border, verrà utilizzato il valore predefinito di quell'attributo (se esiste).
Nota:border-colorQuando si imposta il bordo dell'elemento, se manca il valore dell'attributo o non viene specificato il valore dell'attributo (ad esempio border: 5px solid;), il valore predefinito dell'elementocolorL'attributo utilizzato sarà border-color.
In questo esempio, il bordo sarà una linea nera di larghezza 5px:
p {
color: black;
border: 5px solid;
}Prova a vedere‹/›Ma, nel caso in cui l'attributo border-style sia presente, l'omissione di questo valore non mostrerà alcun bordo, perché in questo momento il valore predefinito dell'attributo border-style è none.
Nei seguenti esempi, non ci sarà bordo:
p {
border: 5px #00ff00;
}Prova a vedere‹/›