Come implementare bordi diversi nei CSS?

Questo articolo ti fornirà una conoscenza dettagliata e completa dei bordi nei CSS, dei loro aspetti di progettazione e dei diversi tipi.

I bordi vengono utilizzati nelle pagine HTML per delimitare ed evidenziare il contenuto. Quando su una pagina sono presenti molte informazioni e desideri attirare l'attenzione dell'utente su parti specifiche, utilizza i bordi attorno a quel contenuto. In questo articolo sui bordi nei CSS tratterò i seguenti argomenti:

Quando usare i bordi

La pratica standard è quella di utilizzare i tag di bordo CSS per definire i bordi nelle pagine HTML per:





  • Intorno a titoli importanti
  • Per evidenziare poscritto o note importanti
  • Per allegare immagini, illustrazioni, citazioni di persone, video
  • Per attirare l'attenzione su prezzi, tempistiche o informazioni così significative

Potresti voler leggere su prima di iniziare a conoscere i bordi CSS.

Per un tutorial CSS completo, visita Edureka CSS Tutorial per principianti . Avrai un eccellente avvertimento sul modo in cui i CSS devono essere utilizzati per aumentare il web design HTML.



Bordi in CSS

I bordi CSS possono essere assegnati a diverse sezioni della pagina HTML, sia che si tratti di racchiudere titoli o paragrafi. Cominciamo con un esempio. Qui definiamo un bordo attorno all'intestazione e un altro bordo attorno al testo del paragrafo.

body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: punteggiato}

Bordo anche intorno al paragrafo!

Bordi in CSS



Attributi di CSS Border

I bordi CSS hanno 3 attributi principali per loro

  • stile:Ilstileattributo definisce il modello del bordo.
  • colore: Il colore può essere uno qualsiasi del set definito dai colori CSS.
  • larghezza: La larghezza serve per variare lo spessore del bordo, per renderlo più prominente.

Nell'esempio sopra, abbiamo visto che è definito un solo attributo border, ovvero il suo stile. Gli altri attributi, quando non definiti, assumono valori predefiniti. C'è un altro attributo chiamato raggio, che è usato meno frequentemente. È usato per arrotondare i bordi del bordo.

  • stile del bordo attributo
Stile Descrizione
stile bordo: solido
stile bordo: doppio
stile bordo: scanalatura
stile bordo: cresta
stile bordo: inserto
stile bordo: inizio
stile bordo: nessuno
stile bordo: nascosto
stile bordo: punteggiato
stile bordo: tratteggiato

Noterai che c'è anche un'opzione 'nessun bordo' e 'bordo nascosto'. Uno sviluppatore può semplicemente evitare di definire un confine, perché definirlo esplicitamente come un 'confine nascosto'? Questo viene fatto per l'utilizzo dello spazio e per scopi di allineamento con altri elementi nella pagina.

Anche gli stili di bordo possono essere combinati all'interno di un elemento. A tale scopo, i 4 lati del bordo individuali possono essere definiti separatamente con stili diversi. Questo può essere fatto in 2 modi. Definisci tutti e 4 i lati in un unico tag. In questo caso, il conteggio inizia dalla riga superiore e poi si sposta in senso orario. In alternativa, ciascuna delle 4 linee di confine può essere definita anche in singoli tag. Entrambi i casi sono mostrati nel prossimo esempio.

Stile Descrizione
stile bordo: doppio pieno tratteggiato tratteggiato

stile bordo superiore: punteggiato

border-right-style: tratteggiato

stile bordo inferiore: solido

stile bordo sinistro: doppio

  • colore del bordo attributo

L'attributo color per un bordo può essere impostato in più modi. È simile all'impostazione del colore per altri elementi. I colori possono essere impostati con uno dei seguenti metodi:

  • nome - specificare un nome di colore, ad esempio 'blu'. Puoi anche provare alcune fantasiose opzioni di colore come 'BlanchedAlmond'!
  • Esadecimale - specifica un valore esadecimale, come '# ff0000'
  • RGB - impostare il codice RGB. Ad esempio, rgb (255,255,0) significa Giallo.
  • ambientazione - come 'trasparente' o 'opaco'
  • larghezza del bordo attributo:

La proprietà width, come suggerisce il nome, definisce lo spessore dei 4 lati del bordo. Se un valore è definito, è per tutti i lati, altrimenti è possibile impostare anche valori di larghezza individuali.

La larghezza può essere specificata in qualsiasi unità standard come pixel ('px'), punti ('pt') o in centimetri ('cm'). È inoltre possibile specificare la larghezza utilizzando i valori predefiniti di 'spesso', 'sottile' e 'medio'.

Stile Descrizione
larghezza del bordo: 10 px
larghezza del bordo: 0,1 cm
larghezza del bordo: media
  • border-radius attributo

Lo scopo della definizione del raggio è ottenere angoli arrotondati per il bordo. Il fattore raggio definisce l'entità dell'arrotondamento. Maggiore è il valore, più curvi diventano gli angoli. Come pratica standard, i valori del raggio vengono mantenuti tra 1-3 volte la larghezza del bordo.

Il codice seguente genererà:

larghezza del bordo: 10 px
border-radius: 30px

Valori predefiniti per gli attributi del bordo

  • L'unico attributo obbligatorio è il stile . Se manca lo stile, il bordo non apparirà.

  • Se il colore non è specificato, il colore dell'elemento sottostante viene preso come valore predefinito. Ad esempio, se il colore del testo di un paragrafo è definito come 'blu', anche il colore del bordo predefinito sarà blu. Nel caso in cui non vi sia alcuna definizione di colore anche per l'elemento, il colore predefinito è 'nero'.

  • Il valore predefinito per la larghezza è 'medio'.

Definisci i bordi in stenografia

Alcuni sviluppatori preferiscono definire gli attributi del bordo in un tag conciso di una riga. Questo formato abbreviato aiuta a ridurre al minimo le righe di codice e gli sviluppatori esperti preferiscono questo formato. Si consiglia di utilizzare il formato abbreviato quando la definizione del bordo è semplice e abbastanza standardizzata. Tuttavia, se è necessario evidenziare ogni lato del bordo in uno stile diverso, è necessario attenersi al formato di definizione dei singoli tag.

Viene utilizzato il codice seguente:

stile bordo: tratteggiato
colore del bordo: verde
larghezza del bordo: 5px
bordo: verde tratteggiato 5px

Punti da tenere a mente durante la progettazione dei bordi in CSS

  • Non utilizzare troppi bordi in una pagina, può distrarre e rendere difficile la concentrazione dell'utente.

  • È importante mantenere la coerenza nello stile e nei colori del bordo. Gli elementi nello stesso livello di gerarchia in una pagina devono avere uno stile e una larghezza del bordo simili per uniformità. Ad esempio, se paragrafo è definito con un bordo pieno e una larghezza di 5px, mantieni questo formato in tutti gli altri paragrafo elementi durante la progettazione del sito web.

  • Attenersi a uno stile di definizioni dei tag. Alcuni sviluppatori sono a proprio agio con le definizioni dei collegamenti con tutti i valori assegnati a un singolo file confine etichetta. Alcuni altri preferiscono un elenco esplicito di tutti i tag per larghezza, colore e stile. La convenzione è che quando in una pagina sono richieste decorazioni di bordo elaborate, i singoli tag vengono elencati separatamente. Ciò aiuta durante il debug di tali definizioni di bordo personalizzate. Per i casi normali, sarebbe sufficiente una definizione di scorciatoia.

    differenza tra lanci e lanci

Spero che tu abbia trovato le informazioni che stavi cercando sui bordi CSS e wCon questo, arriviamo alla fine di questo articolo Borders in CSS.

Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Hai domande per noi? Per favore menzionalo nella sezione dei commenti del blog 'Border in CSS' e ti risponderemo.