Benvenuti in questa nuova guida su HTML e CSS. Oggi andremo a vedere in maniera più precisa il border, la parte più personalizzabile del box model.

Nel border, come abbiamo visto nella scorsa guida, possiamo andare a definire: spessore, stile e colore.
Oggi andremo a vedere alcuni stili e alcuni modi per personalizzare il border.

Prima di tutto specifichiamo una cosa: il border può essere presente in tutti i lati del box model come può essere presente in un solo lato, dipende da come lo preferite fare voi.
Possiamo pure dare uno stile o colore diverso ad ogni lato del bordo.

Purtroppo nella guida non posso farvi vedere gli stili dei bordi, quindi per vederli meglio vi consiglio di consultare come sempre il sito w3schools.


Ora ve ne elencherò alcuni tra i più usati:

  • solid: Un bordo “normale”. Senza troppi effetti, semplicemente una striscia colorata se vogliamo metterla così.
  • groove/ridge/inset/outset: Questi stili sono simili, entrambi hanno una sorta di effetto 3D, anche se questo varia in base al colore e a quale useremo dei quattro.
  • dotted: Un bordo a “tratti”, alternato tra spazi vuoi e lineette.
  • double: Un bordo doppio.

Inoltre, come detto prima possiamo usare diversi stili per ogni lato. Ma come?
Tra le regole di style del div, scriviamo:

border-style: solid dotted double outset;

Ovviamente dovremo prima definire altre regole, ma comunque in questo modo, girando in senso orario, ogni lato del bordo avrà uno degli stili segnati là.
La stessa cosa vale per i colore, usando border-color e per lo spessore usando border-width.

Per questa guida è tutto.
Se avete altre domande contattatemi su Kirond. Invece se avete altre guide da consigliare scrivetele al nostro Profilo Ufficiale, Draky00 o al nostro Bot Ufficiale per Limitati.

Risorse

Iscriviti tramite email

Inserisci il tuo indirizzo e-mail per iscriverti a HackTricks, e ricevere via e-mail le notifiche di nuovi post.