Come aggiungere una linea orizzontale
Metti <hr> tra due blocchi di contenuto. Non ha tag di chiusura:
Di default la linea occupa tutta la larghezza del suo contenitore, ha un piccolo margine sopra e sotto ed è disegnata come un sottile bordo grigio inset (un bordo chiaro e uno scuro).
<hr> sta per horizontal rule, linea orizzontale. In HTML significa un'interruzione tematica: un cambio di argomento o di scena dentro una sezione. I lettori di schermo lo annunciano come separatore. Se vuoi solo una linea decorativa (sotto un titolo, intorno a una card), disegnala invece con un bordo CSS su quell'elemento.
Dare stile a un hr con il CSS
L'aspetto predefinito viene dai bordi, quindi il modo affidabile di dare stile a un <hr> è toglierli e disegnare tu un solo bordo:
| Per cambiare | Usa |
|---|---|
| Colore | border-top: 2px solid #2563eb (dopo border: none) |
| Spessore | La larghezza in quel bordo, come 6px |
| Stile | solid, dashed, dotted, double |
| Lunghezza | width: 40%, più margin-inline: auto per centrarla |
| Estremità arrotondate | height + background + border-radius al posto di un bordo |
| Spazio intorno | margin |
Impostare solo color: blue su un hr cambia la linea nei browser attuali, ma lo stile inset predefinito la ombreggia e resta alta 2px. Azzerare il bordo ti dà esattamente quello che chiedi.
Vecchi attributi di hr
Il codice vecchio usa attributi sul tag stesso:
<hr size="4" width="50%" color="red" noshade align="left">
size, width, color, noshade e align sono obsoleti. I browser li applicano ancora perché le vecchie pagine si vedano bene, ma sono HTML non valido e più difficili da cambiare in seguito. Sostituiscili con il CSS qui sopra.
Un separatore con del testo al centro
La linea "oppure" tra due pulsanti di accesso non è un <hr> (un hr non può contenere testo). È una riga flex con una linea disegnata ai due lati della parola:
I due pezzi ::before e ::after prendono ciascuno metà dello spazio libero con flex: 1 e disegnano un bordo superiore. Cambia or con una parola più lunga e le linee si accorciano per starci.
Linee verticali
Non esiste una versione verticale di <hr>. Disegna una linea verticale con un bordo su un lato di un elemento, o con un elemento sottile dentro una riga flex:
border-inline-start mette la linea all'inizio del testo, cioè a sinistra in italiano e a destra in arabo o ebraico, quindi il layout funziona in entrambe le direzioni.
Errori comuni
- Scrivere
</hr>.<hr>è un elemento vuoto. Basta<hr>o<hr />. - Usare
<hr>come decorazione. I lettori di schermo annunciano ognuno di essi. Una linea solo visiva appartiene al CSS. - Dare stile solo con
color. Azzera il bordo conborder: nonee impostaborder-top. - Usare
<br>o trattini bassi per disegnare linee. Usa<hr>o un bordo. Vedi andare a capo per capire a cosa serve<br>. - Usare attributi obsoleti. Sposta
size,width,colorenoshadenel CSS.
Domande frequenti
Come aggiungo una linea orizzontale in HTML?
Usa il tag <hr> su una riga a sé. È un elemento vuoto senza tag di chiusura, e disegna una linea su tutta la larghezza del suo contenitore.
Come cambio il colore di un hr?
Togli il bordo predefinito e disegna il tuo: hr { border: none; border-top: 2px solid #2563eb; }. Anche impostare solo color lo cambia, ma lo stile inset predefinito lo lascia ombreggiato e bicolore.
Come rendo un hr più spesso?
Imposta lo spessore del bordo: hr { border: none; border-top: 4px solid #111827; }. L'attributo size dei vecchi tutorial funziona ancora nei browser ma è obsoleto, quindi usa il CSS.
Cosa significa hr?
Horizontal rule, cioè linea orizzontale. Nell'HTML attuale indica un'interruzione tematica: un cambio di argomento o di scena tra paragrafi. I lettori di schermo lo annunciano come separatore.
Come faccio una linea verticale in HTML?
L'HTML non ha un tag per la linea verticale. Aggiungi un bordo a un lato di un elemento, come border-inline-start: 2px solid #e5e7eb, oppure usa un elemento stretto con un colore di sfondo dentro una riga flex.
