CSS border-end-end-radius
La proprietà CSS border-end-end-radius (CSS Logical Properties, CSS3/4) definisce il raggio dell’angolo logico di fine blocco e fine inline
La proprietà border-end-end-radius permette di arrotondare l'angolo che si trova all'incrocio tra la fine dell'asse blocco e la fine dell'asse inline, adattandosi automaticamente alla direzione del testo e alle scritture orizzontali o verticali. È utile per creare layout internazionali e flessibili senza dover gestire manualmente gli angoli fisici.
Sintassi
Significato dei valori principali:
lunghezza: Raggio di curvatura dell’angolo in unità CSS come
px,em, ecc. Esempio:10px,1em.
Esempio proprietà: border-end-end-radius
Codice Esempio: border-end-end-radius
.border-end-end-radius-box {
width: 250px;
height: 150px;
border: 3px solid #e76f51;
border-start-start-radius: 0;
border-end-end-radius: 25px;
background-color: #f4a261;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 20px auto;
}/* Scrittura verticale */.border-end-end-radius-box[dir="rtl"] {
writing-mode: vertical-rl;
}
Contenuto Esempio: border-end-end-radius
Esempio di utilizzo della proprietà border-end-end-radius
In questo esempio, l'angolo di fine blocco e fine inline (in base alla direzione del testo) ha un raggio arrotondato di 25px:
CSS e HTML per l'elemento con border-end-end-radius:
<style>
.border-end-end-radius-box {
width: 250px;
height: 150px;
border: 3px solid #e76f51;
border-start-start-radius: 0;
border-end-end-radius: 25px;
background-color: #f4a261;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 20px auto;
}
/* Scrittura verticale per mostrare l’adattabilità */
.border-end-end-radius-box[dir="rtl"] {
writing-mode: vertical-rl;
}
</style>
<div class="border-end-end-radius-box">
Angolo border-end-end arrotondato
</div>
<div class="border-end-end-radius-box" dir="rtl">
Scrittura verticale, angolo adattato
</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
