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
Ottimizzare gli indici con Automatic Index Compaction in Azure SQL Database
Abilitare .NET 10 su Azure App Service e Azure Functions
Usare la libreria PredicateBuilder per eseguire query tramite Entity Framework che usano or su più campi
Integrazione di Copilot in .NET Aspire
Utilizzare i command service nei test con .NET Aspire
Impostare la content-visibility in CSS per ottimizare il rendering iniziale di una pagina
Integrare Agenti A2A in Azure API Management
Stop Building Chatbots. Build a team
Self-healing degli unit test con Copilot in GitHub
Integrare email esterne con Azure Functions e Managed Connectors
Semplificare i deployment con le label in Azure Container App
Ridimensionamento automatico input tramite CSS


