Lo styling è una parte importante dello sviluppo del sito Web HTML e CSS fornisce stili diversi per elementi HTML; uno di questi è creare un bordo attorno a qualsiasi elemento. Principalmente viene utilizzato per distinguere tra sezioni usando forme di bordo, come solide, tratteggiate, punteggiate e doppie.

Lo scopo di questo manuale è di spiegare come creare bordi dell'angolo rotondo. Per questo, in primo luogo, dobbiamo sapere sul "confine" proprietà. Quindi, iniziamo!

Cos'è la proprietà "bordo" in CSS?

Per creare un bordo attorno a un elemento, è necessario utilizzare il "confine" proprietà. Utilizzando questa proprietà, puoi impostare il "stile","colore", E "larghezza"Del confine.

Sintassi

La sintassi della proprietà di frontiera è data come:

Bordo: colore in stile larghezza

Ecco la descrizione dei valori di cui sopra:

• larghezza: Viene utilizzato per impostare la larghezza del bordo.
• stile: Viene utilizzato per impostare lo stile del bordo, come tratteggiato, tratteggiato, solido o doppio.
• colore: Determina il colore del bordo.

Ecco un esempio in cui implementiamo il "confine" proprietà.

Come creare bordo usando CSS?

Per creare un bordo, prima, aggiungi un elemento in un file HTML. Per fare ciò, creeremo un e assegneremo un "angolo"Classe ad esso. Successivamente, aggiungeremo un titolo e un paragrafo utilizzando

E

Tag:

Suggerimento Linux

Angoli rotondi in CSS

Successivamente, passeremo alla sezione CSS.

Qui, il ".angolo"Viene utilizzato per accedere alla classe assegnata a . Dopodiché, creeremo un bordo usando il "confine"Proprietà e assegnare i valori di larghezza, stile e colore come"4px","solido", E "RGB (248, 6, 107)"Rispettivamente. Inoltre, aggiungeremo la larghezza "250px", altezza "150px"E colore di sfondo"RGB (234, 0, 255)"Per il div:

.angolo
Bordo: 4px Solid RGB (248, 6, 107);
larghezza: 250px;
Altezza: 150px;
Background-color: RGB (234, 0, 255);

Una volta implementato il codice sopra menzionato, vai al file HTML ed eseguilo. Vedrai il seguente risultato:

Ora passeremo alla parte successiva, dove creeremo il bordo quadrato fino al bordo dell'angolo rotondo.

Come arrotondare l'angolo usando CSS?

Per creare un bordo dell'angolo rotondo, il "raggio di confine"La proprietà viene utilizzata, in cui è possibile impostare il raggio dell'angolo secondo le tue preferenze.

Sintassi

La sintassi della proprietà del raggio di confine è riportata di seguito:

Radius di confine: valore

Continuiamo l'esempio precedente e impostiamo il raggio di frontiera per ottenere angoli rotondi.

Esempio

In ".angolo"Classe del file CSS, impostare il valore di"raggio di confine"Proprietà come"30px":

raggio di confine: 30px;

Con la riga sopra aggiunta, otterrai la seguente uscita:

L'output di cui sopra indica che i bordi vengono cambiati con successo in angoli rotondi a causa della proprietà del raggio di frontiera.

Conclusione

In CSS "raggio di confine"La proprietà viene utilizzata per cambiare l'angolo dei confini. La forma della curva cambia in base al valore dato del raggio. Usando la proprietà menzionata, è possibile impostare il raggio dell'angolo secondo la tua scelta. In questo articolo, abbiamo spiegato come arrotondare i bordi dell'angolo usando la proprietà del raggio di frontiera con l'aiuto di un esempio.