CSS border-start-end-radius
La proprietà CSS3 border-start-end-radius imposta il raggio dell'angolo iniziale esterno
La proprietà border-start-end-radius permette di definire il raggio dell’angolo logico "start-end" di un elemento, che corrisponde tipicamente all’angolo in alto a destra in contesti ltr. È utile nei layout internazionali per creare bordi arrotondati che si adattano automaticamente alla direzione del testo.
Sintassi
Significato dei valori principali:
-
lunghezza: valore espresso in
px,em,rem, ecc. Definisce il raggio dell'angolo. -
%: valore percentuale relativo alla dimensione dell’elemento. Ad esempio,
50%crea un angolo perfettamente arrotondato su elementi quadrati.
Esempio proprietà: border-start-end-radius
Codice Esempio: border-start-end-radius
.border-start-end-radius-example {
width: 300px;
height: 200px;
background-color: #007acc;
color: white;
padding: 20px;
font-size: 20px;
border: 4px solid #004c75;
border-start-end-radius: 50px;
direction: ltr; /* rtl per layout da destra verso sinistra */
}
Contenuto Esempio: border-start-end-radius
Esempio di utilizzo di border-start-end-radius
In questo esempio, la proprietà border-start-end-radius arrotonda dinamicamente l'angolo in alto a destra (in ltr) o sinistra (in rtl) a seconda della direzione del testo.
CSS e HTML per l'elemento con border-start-end-radius:
<style>
.border-start-end-radius-example {
width: 300px;
height: 200px;
background-color: #007acc;
color: white;
padding: 20px;
font-size: 20px;
border: 4px solid #004c75;
border-start-end-radius: 50px;
direction: ltr; /* Cambia in rtl per invertire il lato */
}
</style>
<div class="border-start-end-radius-example">
Arrotondato nell'angolo start-end
</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.108
