CSS border-start-start-radius
La proprietà CSS3 border-start-start-radius imposta il raggio dell'angolo iniziale interno
La proprietà border-start-start-radius definisce il raggio dell’angolo logico "start-start" di un elemento. In un layout ltr, corrisponde all’angolo in alto a sinistra; in rtl, all’angolo in alto a destra. È utile per creare bordi arrotondati coerenti nei layout multilingua che rispettano la direzione del testo.
Sintassi
Significato dei valori principali:
-
lunghezza: definisce il raggio dell’angolo, espresso in unità come
px,em,rem, ecc. -
%: valore percentuale relativo alla dimensione dell’elemento, utile per ottenere angoli perfettamente arrotondati in elementi quadrati.
Esempio proprietà: border-start-start-radius
Codice Esempio: border-start-start-radius
.border-start-start-radius-example {
width: 300px;
height: 200px;
background-color: #8e44ad;
color: white;
padding: 20px;
font-size: 20px;
border: 4px solid #5e3370;
border-start-start-radius: 50px;
direction: ltr; /* rtl per layout da destra verso sinistra */
}
Contenuto Esempio: border-start-start-radius
Esempio di utilizzo di border-start-start-radius
In questo esempio, la proprietà border-start-start-radius arrotonda dinamicamente l'angolo in alto a sinistra (in ltr) o destra (in rtl), in base alla direzione del testo.
CSS e HTML per l'elemento con border-start-start-radius:
<style>
.border-start-start-radius-example {
width: 300px;
height: 200px;
background-color: #8e44ad;
color: white;
padding: 20px;
font-size: 20px;
border: 4px solid #5e3370;
border-start-start-radius: 50px;
direction: ltr; /* rtl per layout da destra verso sinistra */
}
</style>
<div class="border-start-start-radius-example">
Arrotondato nell'angolo start-start
</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.214
