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
Evitare memory leaks nelle closure JavaScript
Integrare OpenAI tramite Aspire
Gestire codice JavaScript con code splitting e lazy loading
Supportare la crittografia di ASP.NET Core con Azure Container App
Evidenziare una porzione di testo in un pagina dopo una navigazione
Evitare la compressione degli artefatti in un workflow di GitHub
Creare un agente A2Acon Azure Logic Apps
Utilizzare @property per animare nativamente un oggetto HTML tramite CSS
Effettuare la ricerca di testo nascosto in una pagina web con Javascript
Utilizzare Hybrid Cache in .NET 9
Controllare la telemetria con .NET Aspire
Configuratione e utilizzo .NET Aspire CLI
I più letti di oggi
- Referenziare un package NuGet in una file based app .NET
- Introduzione a LINQ, LINQ to XML, Object e DataSet
- Compilare automaticamente applicazioni .NET 6 con le pipeline di Azure DevOps e GitHub Action
- Rilasciata ufficialmente la versione beta1 di Silverlight 2.0
- Disponibile la beta 1 del .NET Framework 4.0 e di Visual Studio 2010
- ASP.NET 4.0 AJAX arriva alla Preview 5, in attesa della beta2 di ASP.NET 4.0
- Windows Azure in versione 1.0: annunciata la piattaforma Microsoft per il cloud computing
- Windows Phone Developer Tools October 2010 Update
- Rilasciata una preview di Windows Phone SDK 7.1.1 per Tango
- Speciale Windows Store app: costruire app con WinRT per Windows 8




