Molte forme possono essere utilizzate sulla nostra pagina web per creare un design migliore, come cerchi, quadrati, rettangoli e altro ancora. Queste forme possono essere create utilizzando varie proprietà CSS. Più specificamente, gli angoli arrotondati della scatola sono più efficaci degli angoli appuntiti in quanto fanno seguire facilmente le linee degli occhi.

Questo articolo discuterà la procedura di utilizzo della proprietà CSS Border-RADIUS per creare scatole con angoli arrotondati.

Come creare scatole in html?

Per creare due caselle, aggiungi due elementi di div di classe con i nomi "Box-1" E "Box-2", e aggiungi

Elemento con l'intestazione in ciascuno degli elementi Div come segue:

Esempio di casella 1

Esempio di casella 2

Ora, applica gli stili CSS agli elementi HTML.

Stile Elemento H1

H1
imbottitura: 50px;

IL

L'elemento è dotato della proprietà di imbottitura come "50px"Per creare lo spazio extra specificato all'interno dell'intestazione.

Stile Box-1 e Box-2 Div Elements

#box-1,
#box-2
Margine: 1px Auto;
larghezza: 250px;
Altezza: 120px;
Background-color: cioccolato;
Font-size: 10px;
Colore: Ghostwhite;

Le proprietà CSS che vengono applicate al box-1 e alla box-2 di div sono descritte di seguito:

• "larghezza"La proprietà imposta la proprietà di larghezza su 250px.
• "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento a 250px.
• "colore di sfondo"La proprietà viene utilizzata per specificare il colore di sfondo dell'elemento.
• "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere dell'elemento.
• "colore"La proprietà viene utilizzata per l'impostazione del colore del carattere.

Fornendo il codice sopra menzionato, le caselle create verranno mostrate come segue:

Si può osservare che vengono create scatole, ma i loro angoli sono ancora appuntiti. La sezione seguente spiegherà l'uso della proprietà del raggio di frontiera per realizzare scatole con angoli arrotondati.

Cos'è la proprietà CSS Border-Radius?

Il CSS "raggio di confine"La proprietà viene utilizzata per definire il raggio dell'elemento. Questa proprietà può essere composta da uno a quattro valori. Questi valori sono spiegati di seguito.

Sintassi: un valore

Radius di confine: tutto [ / all];

La sintassi di un valore si riferisce al raggio di tutti e quattro gli angoli della scatola.

Sintax3- Due valori

Border-RADIUS: in alto e in basso a destra destra e in basso a sinistra
[ / in alto e in basso a destra in destra e in basso];

La sintassi di due valori specifica il raggio come primo valore indica il raggio sugli angoli in alto a sinistra e in basso a destra e il secondo valore specifica il raggio sugli angoli in alto a destra e in basso a sinistra.

Sintassi: tre valori

Border-Radius: in alto a sinistra-destra e in basso a sinistra-destra
[ / in alto a sinistra-destra e in basso a sinistra-destra];

La sintassi di tre valori specifica il primo valore rappresenta l'angolo in alto a sinistra, il secondo valore indica gli angoli in alto a destra e in basso a sinistra e il terzo valore si applica all'angolo in basso a destra.

Sintassi: quattro valori

Border-Radius: in alto a sinistra in basso a destra in basso a sinistra
[ / in alto a sinistra in basso a destra in basso a sinistra];

La sintassi di quattro valori specifica il primo valore viene applicato all'angolo in alto a sinistra, il secondo valore si applica all'angolo in alto a destra, il terzo valore si applica all'angolo in basso a destra e il quarto valore si applica all'angolo in basso a sinistra.

Come creare scatole d'angolo arrotondate usando CSS?

La sezione del codice seguente spiega come possiamo creare caselle di angolo rotonde.

Style Box-1

#box-1
Background-color: RGB (255, 183, 0);
Border-radius: 100px 2px 100px 1px;

L'elemento di div box-1 viene applicato con le proprietà descritte di seguito:

• "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo dell'elemento.
• "raggio di confine"Con il valore impostato come"100px 2px 100px 1px"Dove 100px indica l'angolo in alto a sinistra, 2px indica l'angolo in alto a destra, 100px indica l'angolo in basso a destra e 1px indica l'angolo in basso a sinistra.

Style Box-2

#box-2
Background-color: darkcyan;
raggio di confine: 30px;

Le proprietà che vengono applicate all'elemento di div box-2 sono descritte di seguito:

• "colore di sfondo"La proprietà imposta il colore dell'elemento di div box-2 con il"darkcyan" colore.
• "raggio di confine"Proprietà con il valore impostato come"30px"Imposta il raggio della scatola su 30px da tutti e quattro gli angoli.

Quindi, per cambiare gli angoli della scatola, i valori della proprietà del raggio di confine possono essere impostati di conseguenza. Fornendo le proprietà di styling CSS sopra agli elementi di Div Box-1 e Box-2, il risultato sembrerà così:

Abbiamo imparato con successo la proprietà del raggio di frontiera per realizzare gli angoli rotondi di scatole singole o multiple.

Conclusione

Per creare un design migliore per la nostra pagina web, è possibile utilizzare forme diverse, come cerchi, quadrati, rettangoli e altro ancora può essere creato con CSS. Le scatole con angoli arrotondati possono essere create in CSS utilizzando il CSS "raggio di confine" proprietà. Questo articolo ha dimostrato l'uso del raggio di confine CSS per creare scatole con angoli arrotondati con esempi.