vendredi 19 juin 2020

CSS - Ajouter des bords arrondis à une image, un tableau, un cadre sur une page HTML!

Vous avez sans doute remarquez que sur beaucoup de sites internet les images , ou les bords des cadres sont arrondies.

Cela se fait en général avec un code sur une feuille de style en cascade plus connues sous le nom de CSS. Le CSS est un morceau de code qui peut être dans un fichier à part avec une extension .css ou, intégré dans le fichier html ou php de votre page.

Voici un code simple pour avoir cet effet arrondi sur vos éléments tels que les images, les tableaux ou tout autres éléments graphiques de votre site.

Dans la balise <head> ajouter ce code :

<style>
#myBorder {
    border-radius: 10px; /* Coins arrondis de 10 pixels - la valeur peut être modifiée */
}

</style>

Ensuite lorsque vous souhaiter afficher une image ou un tableau, il faut rajouter un "id" qui rappelle le style à appliquer ici "myBorder".

Exemple pour une image :

<img src="votre_image.jpg" id="myBorder">

L'image votre_image.jpg aura ses 4 coins arrondis de 10 pixels.

Aucun commentaire:

Enregistrer un commentaire