0Pricing
CSS Academy · Lezione

Stili, larghezza e colore dei bordi

Applicate bordi con stili, larghezze e colori diversi utilizzando proprietà shorthand e longhand.

Stili, larghezza e colore dei bordi è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Forma abbreviata border

La forma abbreviata border imposta contemporaneamente tutti e quattro i lati: spessore, stile e colore.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Valori di border-style

border-style deve essere impostato affinché il bordo venga visualizzato. Valori disponibili:

  • solid — linea continua
  • dashed — trattini lunghi
  • dotted — punti rotondi
  • double — due linee parallele
  • groove/ridge/inset/outset — effetti tridimensionali
  • none — nessun bordo (predefinito)

border-width

border-width accetta qualsiasi unità di lunghezza oppure le parole chiave thin, medium, thick. Utilizzi valori numerici per ottenere precisione.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color accetta qualsiasi valore di colore CSS, incluso RGBA per la trasparenza. currentColor eredita il colore del testo.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Bordi dei singoli lati

Imposti i bordi su lati specifici utilizzando le proprietà in forma estesa:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius arrotonda gli angoli degli elementi. Utilizzi un singolo valore per un arrotondamento uniforme oppure fino a quattro valori per controllare ogni angolo separatamente.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

border-radius ellittico

Ogni raggio dell'angolo può avere due valori separati da / per ottenere un arrotondamento ellittico asimmetrico:

<div class="leaf"></div>

border-image

border-image sostituisce il bordo con un'immagine suddivisa in sezioni o con un gradiente, consentendo di creare bordi decorativi:

<div class="fancy">Gradient border image</div>

outline rispetto a border

outline disegna una linea all'esterno del bordo. A differenza di border, non influisce sul layout o sulle dimensioni dell'elemento. Viene usato comunemente come indicatore del focus da tastiera.

<button class="focus-demo">Focused Button (demo)</button>

Rimuovere outline: utilizzare con cautela

Non rimuova mai i contorni di :focus senza fornire un indicatore visibile alternativo del focus. La rimozione degli stili del focus danneggia l'esperienza degli utenti che utilizzano la tastiera o uno screen reader.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse per le tabelle

Per le tabelle HTML, border-collapse: collapse unisce i bordi delle celle adiacenti in un'unica linea, creando un aspetto più pulito.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Verifica rapida

Quale proprietà CSS disegna una linea all'esterno del bordo senza influire sul layout dell'elemento?

Riepilogo

La forma abbreviata border imposta spessore, stile e colore. border-radius arrotonda gli angoli. outline è separato dal bordo: non influisce sul layout ed è fondamentale come indicatore del focus da tastiera per l'accessibilità.

Domande Frequenti

La lezione «Stili, larghezza e colore dei bordi» è gratuita?

Sì — il testo completo di «Stili, larghezza e colore dei bordi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Stili, larghezza e colore dei bordi»?

Applicate bordi con stili, larghezze e colori diversi utilizzando proprietà shorthand e longhand. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Stili, larghezza e colore dei bordi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Comprendere width, height, margin e padding
  2. Stili, larghezza e colore dei bordi
  3. Box-sizing: content-box e border-box
  4. Outline e box-shadow
← Torna a CSS Academy