Coins arrondis sur une image rectangulaire en utilisant CSS uniquement

Étape 5: Rendre l'image arrondie

Accédez à l'image à l'aide de «chiffre»Et définissez diverses propriétés CSS mentionnées dans l'extrait de code ci-dessous:

Ici:

• "largeur" et "hauteur"Sont utilisés pour définir la taille de l'image.
• "débordement”La propriété indique ce qui devrait se passer si une boîte pour un élément est débordé. Pour ce faire, la valeur de cet attribut est définie comme « caché".
• "marge»Définit l'espace autour de la limite de l'élément.
• "rayon frontalier”Désigne le rayon d'angle de l'élément. À cette fin, la valeur est définie comme «50%«Pour rendre la frontière arrondie.

Sortir

Étape 6: Appliquer le style sur la légende

Accédez à la classe en utilisant le «.légende»Et appliquez les propriétés CSS suivantes:

Selon l'extrait de code ci-dessus:

• "marge»Détermine l'espace à l'extérieur de la frontière.
• "frontière»Définit une frontière à l'extérieur de l'élément.
• "alignement de texte»Propriété utilisée pour définir l'alignement du texte.
• "Couleur de l'arrière plan»La propriété indique la couleur de l'arrière de l'élément.

Sortir

Il s'agit de fabriquer le coin arrondi sur une image rectangulaire en utilisant CSS.

Conclusion

Pour faire les coins arrondis sur une image rectangulaire, ajoutez d'abord l'image à l'aide du «" étiqueter. Ensuite, accédez à l'image et appliquez le «rayon frontalier"Propriété CSS avec la valeur"50%"Cela arrond la bordure de l'image. De plus, définissez le «débordement" comme "caché". Ce message a expliqué la méthode de fabrication de coins arrondis sur des images rectangulaires en utilisant CSS uniquement.