Lo scopo di questo manuale è spiegare come creare bordi angolari arrotondati. Per questo, in primo luogo, dobbiamo conoscere il “ confine ' proprietà. Quindi, iniziamo!
Che cos'è la proprietà 'border' nei CSS?
Per creare un bordo attorno a un elemento, è necessario utilizzare il ' confine ' proprietà. Utilizzando questa proprietà, è possibile impostare il ' stile ”, “ colore ', e ' larghezza ” del confine.
Sintassi
La sintassi della proprietà di confine è data come:
confine : colore stile larghezza
Ecco la descrizione dei valori sopra indicati:
- larghezza: Viene utilizzato per impostare la larghezza del bordo.
- stile: Viene utilizzato per impostare lo stile del bordo, ad esempio punteggiato, tratteggiato, pieno o doppio.
- colore: Determina il colore del bordo.
Ecco un esempio in cui implementiamo il ' confine ' proprietà.
Come creare un bordo usando i CSS?
Per creare un bordo, prima aggiungi un elemento in un file HTML. Per fare ciò, creeremo un
e
:
< corpo >
< div classe = 'angolo' >
< h1 > Suggerimento Linux < / h1 >
< p > Angoli arrotondati in CSS < / p >
< / div >
< / corpo >
Successivamente, passeremo alla sezione CSS.
Qui, il “ .angolo ” serve per accedere alla classe assegnata al
.angolo {
confine : 4px solido rgb ( 248 , 6 , 107 ) ;
larghezza : 250px ;
altezza : 150px ;
colore di sfondo : rgb ( 2. 3. 4 , 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 sul bordo dell'angolo rotondo.
Come arrotondare l'angolo usando i CSS?
Per creare un bordo ad angolo arrotondato, il ' raggio di confine ” è in uso la proprietà, in cui è possibile impostare il raggio dell'angolo in base alle proprie preferenze.
Sintassi
La sintassi della proprietà border-radius è riportata di seguito:
raggio di confine : valoreContinuiamo l'esempio precedente e impostiamo il raggio di confine per ottenere angoli arrotondati.
Esempio
In ' .angolo ” classe del file CSS, imposta il valore di “ raggio di confine ” proprietà come “ 30px ”:
raggio di confine : 30px ;Con la riga sopra aggiunta, otterrai il seguente output:
L'output sopra indicato indica che i bordi vengono modificati correttamente in angoli arrotondati a causa della proprietà border-radius.
Conclusione
In CSS “ raggio di confine ” viene utilizzata per modificare l'angolo dei bordi. La forma della curva cambia in base al valore dato del raggio. Utilizzando la proprietà menzionata, puoi impostare il raggio dell'angolo in base alla tua scelta. In questo articolo, abbiamo spiegato come arrotondare i bordi degli angoli usando la proprietà border-radius con l'aiuto di un esempio.