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
Generare token per autenicarsi sulle API di GitHub
Gestire la cancellazione di una richiesta in streaming da Blazor
Aggiungere interattività lato server in Blazor 8
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Gestione degli stili CSS con le regole @layer
Testare l'invio dei messaggi con Event Hubs Data Explorer
Utilizzare database e servizi con gli add-on di Container App
Eseguire script pre e post esecuzione di un workflow di GitHub
Miglioramenti nell'accessibilità con Angular CDK
Gestione dell'annidamento delle regole dei layer in CSS