CSS border-top-left-radius
La proprietà CSS border-top-left-radius imposta l'arrotondamento dell'angolo superiore sinistro (CSS3)
La proprietà border-top-left-radius consente di arrotondare l'angolo superiore sinistro di un elemento. Può essere definito in pixel o come percentuale, e permette una personalizzazione fine del design degli angoli.
Sintassi
Significato dei valori principali:
-
length: Imposta il raggio di curvatura dell'angolo in un'unità di misura, come pixel (
px) o em (em). -
percentage: Imposta il raggio di curvatura come una percentuale relativa alla dimensione dell'elemento. Ad esempio,
50%creerebbe un angolo completamente arrotondato (circolare) se applicato a un quadrato.
Esempio proprietà: border-top-left-radius
Codice Esempio: border-top-left-radius
.border-top-left-radius-example {
width: 300px;
height: 200px;
border-top-left-radius: 30px; /* Arrotondamento di 30px per l'angolo superiore sinistro */
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
padding: 20px;
}
Contenuto Esempio: border-top-left-radius
Esempio di utilizzo di border-top-left-radius
In questo esempio, la proprietà border-top-left-radius viene utilizzata per arrotondare l'angolo superiore sinistro di un elemento:
CSS e HTML per l'elemento con angolo superiore sinistro arrotondato:
<style>
.border-top-left-radius-example {
width: 300px;
height: 200px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
padding: 20px;
border-radius: 0; /* Resetta gli altri angoli per evidenziare solo quello specifico */
border-top-left-radius: 30px; /* Arrotondamento di 30px per l'angolo superiore sinistro */
}
</style>
<div class="border-top-left-radius-example">
Elemento con angolo superiore 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: 216.73.216.118
