CSS border-bottom-left-radius
La proprietà CSS border-bottom-left-radius definisce il raggio dell'angolo inferiore sinistro
La proprietà border-bottom-left-radius consente di arrotondare l'angolo inferiore sinistro di un elemento, controllando la curvatura tramite una misura in pixel o una percentuale. Può essere utilizzata da sola o insieme ad altre proprietà di arrotondamento degli angoli per ottenere effetti visivi interessanti.
Sintassi
Significato dei valori principali:
-
length: definisce la curvatura come una distanza fissa (ad esempio,
10px,5em, ecc.). -
percentage: definisce la curvatura come una percentuale delle dimensioni dell'elemento (ad esempio,
50%, che crea un angolo perfettamente arrotondato).
Esempio proprietà: border-bottom-left-radius
Codice Esempio: border-bottom-left-radius
.border-bottom-left-radius-example {
border-bottom-left-radius: 20px;
padding: 20px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
width: 300px;
height: 150px;
}
Contenuto Esempio: border-bottom-left-radius
Esempio di utilizzo di border-bottom-left-radius
In questo esempio, la proprietà border-bottom-left-radius viene utilizzata per arrotondare l'angolo inferiore sinistro di un elemento:
CSS per l'elemento con angolo arrotondato:
<style>
.border-bottom-left-radius-example {
width: 300px;
height: 150px;
padding: 20px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
border-radius: 0; /* Resetta gli altri angoli per evidenziare solo quello specifico */
border-bottom-left-radius: 20px; /* Arrotonda solo l'angolo inferiore sinistro */
}
</style>
<div class="border-bottom-left-radius-example">
Angolo inferiore sinistro arrotondato
</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: 18.97.14.88
