CSS consente di creare bordi personalizzati usando border-width, border-style e border-color proprietà. Dei tre, solo la proprietà border-style è richiesto. Si può mescolare e abbinare proprietà del bordo in qualsiasi modo si desidera. Tuttavia, il bordo personalizzato deve almeno definire uno stile di confine nella definizione. Quando si crea un bordo personalizzato, è possibile definire ogni proprietà per ogni lato singolarmente, o utilizzare una proprietà scorciatoia per definire tutti i valori del confine in una sola riga. Utilizzare classi CSS per creare diversi confini personalizzati che si può applicare a qualsiasi elemento nei file HTML.

istruzione

1 Aprire il file CSS e digitare quanto segue:

.borderone {

border-width: 1px;

border-style: solido;

border-color: purple;

}

Questo crea una classe che fa un bordo viola solido che ha uno spessore di un pixel.

2 Digitare quanto segue:

.bordertwo {

border-width: di spessore;

border-style: doppio;

}

Questa classe utilizza il valore di spessore predefinito per la larghezza invece di fornire una dimensione in pixel. Si può anche utilizzare "sottile" o "medio".

3 Digitare quanto segue:

.borderthree {

border-style: punteggiato solido;

border-colore: giallo rosso;

}

Questa classe utilizza due valori ciascuno per le proprietà di stile e colori, alternando i due tra la parte superiore, a destra, in basso ea sinistra. In questo esempio, i lati superiore e inferiore del confine sono punteggiato e rosso, mentre i lati destro e sinistro sono solidi e giallo.

4 Digitare quanto segue:

.borderfour {

border-top-width: 10px;

border-top-style: tratteggiate;

border-top-color: blue;

border-right-width: 15px;

border-right-style: doppio;

border-right-colore: giallo;

border-bottom-width: 3px;

border-bottom-style: punteggiato;

border-bottom-color: red;

border-left-width: 1px;

-Sinistra-stile del bordo: solido;

border-left-color: green;

}

Questa classe definisce ogni possibile proprietà border separatamente, utilizzando una larghezza diversa, stile e colore per ogni lato del confine.

5 Digitare quanto segue:

.borderfive {

border: 3px nero solido;

}

Questa classe utilizza la proprietà border scorciatoia per definire ogni attributo di confine in una proprietà e applica gli stessi valori per ciascun lato del confine. Il border-style è implicato come parte della proprietà. Questa proprietà richiede di definire le proprietà della larghezza, lo stile, ordine dei colori, ma si può omettere la larghezza e il colore se non si vuole definirli.

6 Salvare il file CSS.