Proprietà dei bordi CSS
I CSS border proprietà consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento.
Questo elemento ha un bordo groove che è 15px ampio e verde.
Stile del bordo
Il border-style proprietà specifica che tipo di bordo da visualizzare.
I seguenti valori sono consentiti:
-
dotted- Definisce un bordo punteggiato -
dashed- Definisce un bordo tratteggiato -
solid- Definisce un bordo solido -
double- Definisce un doppio bordo -
groove- Definisce un bordo 3D scanalato. L'effetto dipende dal valore border-color -
ridge- Definisce un bordo 3D increspato. L'effetto dipende dal valore border-color -
inset- Definisce un bordo 3D inserto. L'effetto dipende dal valore border-color -
outset- Definisce un bordo fin dall'inizio in 3D. L'effetto dipende dal valore border-color -
none- Definisce nessun bordo -
hidden- Definisce un bordo nascosto
Il border-style proprietà può avere da uno a quattro valori (per il bordo superiore, margine destro, bordo inferiore, e il confine a sinistra).
Esempio
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Risultato:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Prova tu stesso "  | Nota: Nessuna delle altre proprietà border CSS descritte di seguito avrà alcun effetto a meno che il border-style struttura si trova! |
|---|
Larghezza del bordo
Il border-width proprietà specifica la larghezza dei quattro bordi.
La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em , ecc) o utilizzando uno dei tre valori predefiniti: sottile, medio, o spesso.
Il border-width proprietà può avere da uno a quattro valori (per il bordo superiore, margine destro, bordo inferiore, e il confine a sinistra).
Esempio
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Prova tu stesso " Colore del bordo
Il border-color proprietà viene utilizzata per impostare il colore dei quattro bordi.
Il colore può essere impostata tramite:
- name - specificare il nome di un colore, come "red"
- Hex - specificare un valore esadecimale, come "#ff0000"
- RGB - specificare un valore RGB, come "rgb(255,0,0)"
- transparent
Il border-color proprietà può avere da uno a quattro valori (per il bordo superiore, margine destro, bordo inferiore, e il confine a sinistra).
Se border-color non è impostato, eredita il colore dell'elemento.
Esempio
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Prova tu stesso " Border - singoli lati
Dagli esempi precedenti si è visto che è possibile specificare un bordo diverso per ciascun lato.
In CSS, c'è anche proprietà per specificare ciascuno dei confini (in alto, a destra, in basso, e di sinistra):
Esempio
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Prova tu stesso " L'esempio precedente dà lo stesso risultato come questo:
Quindi, ecco come funziona:
Se il border-style struttura dispone di quattro valori:
- border-style : doppio solido punteggiato tratteggiata;
- bordo superiore è punteggiata
- bordo destro è solido
- bordo inferiore è doppio
- bordo sinistro è tratteggiata
Se il border-style struttura dispone di tre valori:
- border-style : punteggiato solido doppio;
- bordo superiore è punteggiata
- i bordi destro e sinistro sono solidi
- bordo inferiore è doppio
Se il border-style proprietà ha due valori:
- border-style : punteggiato solido;
- bordi superiore e inferiore sono punteggiate
- i bordi destro e sinistro sono solidi
Se il border-style proprietà ha un valore:
- border-style : dotted;
- tutti e quattro i bordi sono punteggiate
Il border-style proprietà viene utilizzata nell'esempio precedente. Tuttavia, funziona anche con border-width e border-color .
Border - Stenografia Proprietà
Come si può vedere dagli esempi precedenti, ci sono molte proprietà da considerare quando si tratta di confini.
Per accorciare il codice, è possibile specificare tutte le singole proprietà del bordo in una proprietà.
Il border di proprietà è una proprietà scorciatoia per le seguenti proprietà del bordo individuali:
-
border-width -
border-style(richiesto) -
border-color
Altri esempi
Tutte le proprietà migliori di confine in una dichiarazione
Questo esempio dimostra una proprietà scorciatoia per settare tutte le proprietà per il bordo superiore in una dichiarazione.
Impostare lo stile del bordo inferiore
Questo esempio mostra come impostare lo stile del bordo inferiore.
Impostare la larghezza del bordo sinistro
Questo esempio mostra come impostare la larghezza del bordo sinistro.
Impostare il colore dei quattro bordi
Questo esempio mostra come impostare il colore dei quattro bordi. Può avere da uno a quattro colori.
Impostare il colore del bordo destro
Questo esempio mostra come impostare il colore del bordo destro.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
Tutte le proprietà del bordo CSS
| Proprietà | Descrizione |
|---|---|
| border | Imposta tutte le proprietà del bordo in una dichiarazione |
| border-bottom | Imposta tutte le proprietà bordo inferiore in una dichiarazione |
| border-bottom-color | Imposta il colore del bordo inferiore |
| border-bottom-style | Imposta lo stile del bordo inferiore |
| border-bottom-width | Imposta la larghezza del bordo inferiore |
| border-color | Imposta il colore dei quattro bordi |
| border-left | Imposta tutte le proprietà del bordo a sinistra in una dichiarazione |
| border-left-color | Imposta il colore del bordo sinistro |
| border-left-style | Imposta lo stile del bordo sinistro |
| border-left-width | Imposta la larghezza del bordo sinistro |
| border-right | Imposta tutte le proprietà del bordo di destra in una dichiarazione |
| border-right-color | Imposta il colore del bordo destro |
| border-right-style | Imposta lo stile del bordo destro |
| border-right-width | Imposta la larghezza del bordo destro |
| border-style | Imposta lo stile dei quattro bordi |
| border-top | Imposta tutte le proprietà del bordo superiore in una dichiarazione |
| border-top-color | Imposta il colore del bordo superiore |
| border-top-style | Imposta lo stile del bordo superiore |
| border-top-width | Imposta la larghezza del bordo superiore |
| border-width | Imposta la larghezza dei quattro bordi |