Pubblicato il

css

html


come creare una immagine con bordo a cerchio o arrotondato con CSS e HTML

Ciao a tutti e benvenuti in questa guida dove vi mostrerò come creare una immagine dai bordi arrotondati usando il codice HTML e CSS. Questo può essere molto utile quando si vuole creare una icona per un avatar o una foto profilo. Vediamo come!

Come creare una immagine con i bordi arrotondati

Come prima cosa andiamo ad inserire una immagine all'interno del nostro codice HTML. Come probabilmente già sapete, una immagine in HTML viene rappresentata con il tag <img>

Prendiamo come esempio la seguente immagine:

come creare una immagine o elemento HTML con bordi arrotondati

Questa immagine è rappresentata dal seguente tag HTML:
<img id="testImmagine" src="https://images.devnews.it/tutorials/web-design/api-meteo/thimb.png">

Ora che abbiamo la nostra immagine vediamo come possiamo trasformare questa immagine rendendola in un cerchio: Ovvero arrotondando i suoi bordi! Per fare ciò andremo ad utilizzare la regola CSS: border-radius. Questa proprietà CSS praticamente va ad inserire un cerchio con raggio specificato negli angoli dell'elemento HTML da arrotondare. Se per esempio usiamo la regola border-radius: 5px; Verrano "posizionati" 4 "cerchi" con raggio di 5 pixel negli angoli dell'elemento HTML che andranno ad unirsi con il bordo per formare un nuovo bordo. Se vogliamo quindi creare un bordo completamente arrotondato (ovvero un cerchio) dobbiamo inserire negli angoli della nostra figure dei cerchi con raggio pari alla metà della larghezza dell'elemento stesso. Per fare ciò utilizziamo la seguente regola CSS:


#testImmagine{
    border-radius:50%;    
}
Con questa regole andiamo a specificare che il raggio dell'angolo sia pari al 50% della larghezza dell'elemento da arrotondare. Questo significa che la figura diventerà un cerchio. Dopo aver eseguito il codice HTML e CSS mostrato in alto vedrete in output una immagine rotonda come quella mostrata in basso:


guida in italiano css come creare immagine con angoli o bordi arrotondati

Come vedete abbiamo un problema: Se l'immagine iniziale non è un quadrato perfetto ma è un rettangolo dobbiamo utilizzare alcune regole in CSS in più per rendere l'immagine in un cerchio.

Come arrotondare una immagine rettangolare in CSS

Per arrotondare una immagine rettangolare con CSS andiamo ad utilizzare il seguente codice CSS:

#testImmagine{
    object-fit: cover;
    border-radius: 50%;
    height: 200px;
    width: 200px;
}
Vediamo il risultato del codice HTML e CSS in basso:

come creare immagine con bordi a cerchio in CSS e HTML

Ci siamo! Abbiamo viso come creare una immagine dai bordi arrotondati in HTML e CSS.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)