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 i named query filter di Entity Framework
Filtrare i dati in ASP.NET Core usando OpenTelemetry su Azure Monitor
Gestire progetti .NET + React in .NET Aspire
Cambiamenti in OpenAPI per la documentazione di ASP.NET
Implementare il throttle in JavaScript
Impostare automaticamente l'altezza del font tramite CSS
Supporto nativo a JSON in SQL Server 2025
Blazor e InputHidden in .NET 10
Definire il colore di una scrollbar HTML tramite CSS
Configurare OpenAI in .NET Aspire
Controllare la velocità di spostamento su una pagina HTML
Operazioni tra insiemi di array in Javascript


