Prerequisiti: Margini e collasso dei margini.
Spessore, stile e colore dei bordi
Spessore, stile e colore dei bordi: fondamenti.
Un bordo separa l’area interna della scatola dall’esterno. border combina spessore, stile e colore; border: 2px solid navy usa una linea continua di due pixel CSS. Impostare soltanto un colore non garantisce un bordo visibile: serve anche uno stile diverso da none. Puoi intervenire sui quattro lati singolarmente.
Come funziona: spessore, stile e colore dei bordi
Spessore, stile e colore dei bordi: comportamento nel browser.
Le proprietà border-width, border-style e border-color controllano componenti specifiche. Le abbreviazioni possono reimpostare componenti non indicate: una dichiarazione border successiva può sostituire scelte precedenti. Quando cambi un solo aspetto usa la proprietà più precisa per rendere chiara l’intenzione.
Scelte di utilizzo e limiti
Spessore, stile e colore dei bordi: progetto e verifica.
Il bordo contribuisce al dimensionamento secondo box-sizing. outline invece è un contorno che non occupa spazio nello stesso modo ed è utile per il focus. Non usare bordi decorativi come unico modo di comunicare uno stato importante: accompagna il cambiamento con un testo comprensibile quando necessario.
Esempio commentato
Spessore, stile e colore dei bordi: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bordi</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="scheda"><h1>Un bordo leggibile</h1><p>Confronta i quattro lati.</p></section>
</body>
</html>
File stile.css
.scheda { border: 1px solid navy; border-top-width: 4px; padding: 1rem; }
Risultato nel browser
La regola generale crea il bordo; la proprietà specifica rende più spesso soltanto il lato superiore.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
border-top-width | 4px | Spessore del bordo superiore. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
LABORATORIO
Sperimentare: Spessore, stile e colore dei bordi
La regola generale crea il bordo; la proprietà specifica rende più spesso soltanto il lato superiore.
Obiettivo: Comprendere e applicare spessore, stile e colore dei bordi attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Cambia border-style in dashed conservando colore e spessori.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Il bordo diventa tratteggiato su tutti i lati; lo spessore superiore rimane 4px.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Il bordo diventa tratteggiato su tutti i lati; lo spessore superiore rimane 4px. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Mantieni un bordo di 1px sugli altri lati e rendi quello sinistro verde e spesso 4px.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.scheda { border: 1px solid navy; border-left: 4px solid darkgreen; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Spessore, stile e colore dei bordi: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale componente serve a rendere visibile il bordo ordinario? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.