Le ultime versioni dei principali browser supportano la proprietà border-radius di CSS3 che consente di specificare l'angolo di arrotondamento da applicare ai vertici dell'elemento.
Ad esempio lo stile definito di seguito consente di applicare a div con classe "box" un bordo nero dello spessore di 2 pixel e smussato di 10 pixel:
<style> div.box { border: 2px solid #000; -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ border-radius: 10px; /* CSS3 standard */ } </style>
Nell'esempio, oltre alla sintassi standard, sono state indicate anche le proprietà specifiche alcuni vendor (Mozilla e WebKit) così da estendere la compatibilità anche con le vecchie versioni di Firefox, Chrome e Safari.
Possiamo diversificare la smussatura di ogni angolo definendo le proprietà border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius e anche applicare un angolo ellittico indicando come valore il rapporto tra asse orizzontale e verticale:
<style> div.box { border-radius: 20px / 10px; /* raggio orizzontale di 20px e verticale di 10px */ } </style>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l nesting nativo dei CSS
Effettuare il refresh dei dati di una QuickGrid di Blazor
Managed deployment strategy in Azure DevOps
Gestire il colore CSS con HWB
Gestire gli accessi con Token su Azure Container Registry
Creare un webhook in Azure DevOps
.NET Conference Italia 2024
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Gestione dell'annidamento delle regole dei layer in CSS
Configurare lo startup di applicazioni server e client con .NET Aspire
Generare una User Delegation SAS in .NET per Azure Blob Storage
Gestione dei nomi con le regole @layer in CSS