CSS border-end-start-radius
La proprietà CSS border-end-start-radius (CSS Logical Properties, CSS3/4) definisce il raggio dell’angolo logico di fine blocco e inizio inline
La proprietà border-end-start-radius permette di arrotondare l'angolo situato all'incrocio tra la fine dell'asse blocco e l'inizio dell'asse inline, adattandosi automaticamente alla direzione del testo e alla scrittura orizzontale o verticale. Questa proprietà è particolarmente utile per layout internazionali e flessibili.
Sintassi
Significato dei valori principali:
lunghezza: Valore del raggio di curvatura in unità CSS come
px,em, ecc. Esempio:15px,1.5em.
Esempio proprietà: border-end-start-radius
Codice Esempio: border-end-start-radius
.border-end-start-radius-box {
width: 260px;
height: 150px;
border: 3px solid #2a9d8f;
border-end-start-radius: 20px;
border-start-end-radius: 0;
background-color: #e9c46a;
color: #264653;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 20px auto;
transition: all 0.3s ease;
}/* Scrittura verticale */.border-end-start-radius-box[dir="rtl"] {
writing-mode: vertical-rl;
}
Contenuto Esempio: border-end-start-radius
Esempio di utilizzo della proprietà border-end-start-radius
In questo esempio, l'angolo in corrispondenza della fine blocco e inizio inline ha un raggio arrotondato di 20px, adattandosi alla direzione del testo:
CSS e HTML per l'elemento con border-end-start-radius:
<style>
.border-end-start-radius-box {
width: 260px;
height: 150px;
border: 3px solid #2a9d8f;
border-end-start-radius: 20px;
border-start-end-radius: 0;
background-color: #e9c46a;
color: #264653;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 20px auto;
transition: all 0.3s ease;
}
/* Scrittura verticale per mostrare adattabilità */
.border-end-start-radius-box[dir="rtl"] {
writing-mode: vertical-rl;
}
</style>
<div class="border-end-start-radius-box">
Angolo border-end-start arrotondato
</div>
<div class="border-end-start-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
