CSS border-radius
La proprietà CSS border-radius rende gli angoli di un elemento arrotondati
La proprietà border-radius consente di creare angoli arrotondati su un elemento. Si può applicare un valore uniforme per tutti gli angoli oppure definire valori diversi per ciascun angolo specifico. Può essere utilizzata con valori di lunghezza, come **px** o **em**, o percentuali per ottenere angoli più morbidi.
Sintassi
Significato dei valori principali:
-
length: imposta la quantità di arrotondamento in unità di misura come px, em, ecc.
-
%: definisce un arrotondamento in termini percentuali rispetto alle dimensioni dell'elemento.
border-radius: 10px;
border-radius: 5px 5px 40px 40px;
border-radius: 5px 5px / 40px 40px;
Esempio proprietà: border-radius
Codice Esempio: border-radius
.border-radius-example {
width: 300px;
height: 200px;
border: 5px solid #50a14f; /* Bordo di 5px */
border-radius: 15px; /* Arrotonda tutti e quattro gli angoli */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
}
Risultato: border-radius
Esempio di utilizzo di border-radius
In questo esempio, la proprietà border-radius viene utilizzata per arrotondare tutti e quattro gli angoli di un elemento, rendendolo visivamente più morbido.
CSS e HTML per l'elemento con angoli arrotondati:
<style>
.border-radius-example {
width: 300px;
height: 200px;
border: 10px solid #50a14f; /* Bordo di 10px, solido e verde */
border-radius: 5px 15px 25px 50px; /* Arrotonda specificando i quattro angoli */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
}
</style>
<div class="border-radius-example">
Elemento con angoli arrotondati
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
