Gli sviluppatori possono applicare più proprietà CSS per rendere le loro pagine Web più attraenti, come "altezza" E "larghezza"Proprietà per l'impostazione delle dimensioni,"allineamento"Per regolare il testo,"stile del bordo" E "raggio di confine"Proprietà per impostare il bordo attorno all'elemento. Inoltre, puoi aggiungere un bordo in base alle tue esigenze, ad esempio da un lato dell'elemento, solo per rendere le cose dietro gli oggetti più visibili.

Questo post dimostrerà:

• • Metodo 1: impostare il bordo su un lato
  • Metodo 2: imposta il bordo su tutti i lati con stili diversi

Metodo 1: impostare il bordo su un lato

In CSS, gli utenti possono impostare il bordo su un lato dell'elemento desiderato. A tale scopo, il "bordo-sinistra","Bordo-destra","Border-top" E "Border-Bottom"Le proprietà vengono utilizzate per aggiungere bordi a sinistra, a destra, in alto o in basso.

In questa sezione, imposteremo specificamente il bordo sul lato sinistro del contenitore. Per fare ciò, segui le istruzioni di seguito.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un contenitore di div con l'aiuto di ""Tag. Inserire un “id"Attributo e assegna un nome all'ID.

Passaggio 2: inserire l'intestazione

Successivamente, utilizza il “<H1>"Tag per aggiungere un'intestazione all'interno del contenitore Div. Inoltre, puoi anche utilizzare altri tag di intestazione in base al requisito, come "<H1>" A "<H6>"Tag:

Bordo da un lato

Si può vedere che il contenitore è stato creato correttamente:

Passaggio 3: accedere al contenitore div

Ora accedi al contenitore HTML Div e accedi al nome della classe. Per farlo, un selettore di classe "#"È usato con il nome della classe.

Passaggio 4: inserire il bordo su un solo lato

Dopo aver acceduto al contenitore DIV, applicare le proprietà CSS di seguito:

#main-div
bordo-sinistra: 5px rosso solido;
Background: RGB (56, 239, 245);
Margine: 20px 100px;
larghezza: 200px; Altezza: 150px

Qui:

• • "bordo-sinistra è una proprietà stenografica per impostare la larghezza, lo stile e il colore del bordo-sinistra.
  • "sfondo"La proprietà viene utilizzata per regolare il colore di sfondo dell'elemento.
  • "margine"Proprietà imposta lo spazio al di fuori del confine.
  • "larghezza"Definisce la dimensione della larghezza dell'elemento in un contenitore.

L'immagine risultante mostra il bordo con un solo lato:

Metodo 2: imposta il bordo su tutti i lati con stili diversi

Per impostare il bordo su tutti i lati con colori diversi, utilizzare il codice HTML sopra. Quindi, accedi al contenitore Div con l'aiuto del nome e del selettore ID:

#main-div
Margine: 80px;
Larghezza del bordo: 8px 2px 1px 10px;
raggio di confine: 50px;
Border in stile: doppio punteggio tratto da inserto;
Border-color: RGB (40, 5, 235) RGB (238, 146, 9) RGB (255, 0, 242) RGB (19, 19, 18);

Nel codice sopra fornito:

• • "margine"Specifica lo spazio vuoto al di fuori dell'elemento.
  • "larghezza del bordo"Imposta la larghezza con valori diversi per ciascun lato. Ad esempio, abbiamo aggiunto valori diversi nei pixel.
  • "raggio di confine"È utilizzato per fare la curva rotonda del bordo.
  • "stile del bordo"La proprietà viene utilizzata per impostare lo stile del bordo. In questo scenario, sono impostati quattro diversi tipi di stili per ciascun lato del bordo.
  • "colore del bordo"La proprietà viene utilizzata per allocare il colore al bordo. Qui, il valore per ciascun lato è impostato come colore diverso.

Di conseguenza, verrà applicato il bordo con stili diversi su ciascun lato:

In questo articolo, hai imparato diversi modi per impostare il bordo CSS su una e più lati.

Conclusione

Per impostare il bordo solo da un lato, prima, crea un div usando il ""Elemento. Successivamente, accedi al contenitore Div e applica le proprietà CSS. Successivamente, usa qualsiasi proprietà tra questi, incluso "bordo-sinistra","Bordo-destra","Border-top" E "Border-Bottom"Per impostare il bordo di un lato. Inoltre, gli utenti possono anche impostare "larghezza del bordo","stile del bordo" E "colore del bordo"Separatamente su ciascun lato del bordo. Questo post ha spiegato il metodo per impostare il bordo CSS solo.