Bordi in CSS
Come usare le proprietà CSS di larghezza e colore del bordo e i valori dello stile del bordo come dotted, dashed, solid, double, groove, ridge, inset, outset. Guarda gli esempi.
Bordi in CSS
In questo capitolo parleremo dei bordi e di come applicare loro degli stili. Possiamo assegnare al bordo una larghezza, uno stile e un colore.
Esempio della proprietà border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Risultato
Larghezza del bordo
La proprietà border-width imposta la larghezza di un bordo.
La larghezza può essere specificata in pixel. Può anche essere specificata tramite uno dei tre valori predefiniti: medium, thin o thick.
Non puoi usare la proprietà "border-width" da sola: non funzionerà. Usa prima "border-style" per impostare i bordi.
Esempio della proprietà border-width:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Colore del bordo
La proprietà border-color si usa per impostare il colore di un bordo. Il colore può essere impostato tramite:
- name - specifica il nome di un colore, come "red"
- RGB - specifica un valore RGB, come "rgb(255,0,0)"
- Hex - specifica un valore esadecimale, come "#ff0000"
Non puoi usare la proprietà "border-color" da sola: non funzionerà. Usa prima "border-style" per impostare i bordi.
Di solito scriviamo queste tre proprietà insieme su un'unica riga.
Esempio della proprietà border-color:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Puoi provare altri esempi con il nostro strumento CSS Maker.
Stile del bordo
La proprietà CSS border-style imposta lo stile di tutti e quattro i lati dei bordi di un elemento. I bordi sono collocati sopra lo sfondo di un elemento. Può avere da uno a quattro valori, quindi ogni lato può avere il proprio valore. Il valore predefinito di border-style è none.
border-style ha i seguenti valori:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Alcuni browser non supportano alcuni stili. Di solito, quando uno stile non è supportato, il browser disegna il bordo come solid.
Bordi CSS per i singoli lati
I CSS offrono proprietà che specificano ciascun bordo (destro, sinistro, inferiore e superiore).
La proprietà border-style può avere 4 valori, ad esempio border-style: dotted solid double dashed; dove il bordo superiore è dotted, quello inferiore è double, quello destro è solid e quello sinistro è dashed.
La proprietà border-style può avere 3 valori, ad esempio border-style: dotted solid double; dove il bordo superiore è dotted, quello inferiore è double e i bordi destro e sinistro sono solid.
La proprietà border-style può avere 2 valori, ad esempio border-style: dotted solid; dove i bordi destro e sinistro sono solid e quelli superiore e inferiore sono dotted. E, naturalmente, questa proprietà può avere anche un solo valore, ad esempio border-style: solid; dove tutti i lati sono solid.
Esempio delle proprietà del bordo per i singoli lati:
Esempio del bordo per i singoli lati:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>La proprietà border come shorthand
La proprietà CSS border è uno shorthand per le seguenti singole proprietà del bordo:
- La proprietà CSS border-width, che imposta la larghezza di tutti e quattro i lati del bordo di un elemento.
- La proprietà CSS border-style, che imposta lo stile di tutti e quattro i lati dei bordi di un elemento.
- La proprietà CSS border-color, che imposta il colore di tutti e quattro i lati del bordo di un elemento.
Esempio della proprietà shorthand border:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Bordi arrotondati
Usando la proprietà CSS border-radius, puoi aggiungere bordi arrotondati a un elemento.
Esempio della proprietà border-radius:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>La differenza tra bordi e outline
Outline e bordi creano spesso confusione perché sono molto simili. Tuttavia, ci sono delle differenze tra i due:
- Gli outline vengono disegnati all'esterno del contenuto di un elemento, quindi non occupano spazio.
- Gli outline di solito sono rettangolari, anche se non è obbligatorio.