Ce blog traitera :

• Qu'est-ce que le rayon de contour ?
• Comment appliquer l'effet de rayon de contour sur l'élément HTML ?

Qu'est-ce que le rayon de contour ?

Les ' contour ” est utilisée pour façonner le contour de l'élément, mais elle ne peut pas être implémentée directement. Par conséquent, la méthode alternative pour appliquer l'effet de rayon sur un contour utilise un ' rayon de bordure ” Propriété CSS. Il spécifie les coins arrondis pour les contours.

Comment appliquer l'effet de rayon de contour sur l'élément HTML ?

Pour utiliser la propriété de rayon de contour, suivez les instructions données.

Étape 1 : Intégrer les titres

Au départ, intégrez les titres en utilisant n'importe quelle balise de titre de '

' pour '

”. Par exemple, nous avons utilisé le '

' et '

” pour intégrer deux en-têtes différents dans un document HTML.

Étape 2 : Ajoutez le premier conteneur div

Après cela, ajoutez un conteneur en utilisant le '

' étiqueter. Insérez également le ' classer ” et précisez le nom de la classe selon votre choix.

---

---

Étape 3 : Créer un deuxième conteneur div

Créer un autre ' div ” conteneur en suivant la même procédure :

< h1 style = 'couleur:rgb(48, 10, 218)' > Linuxhint LTD Royaume-Uni < / h1 >

< h2 >

Différents exemples de border-radius pour créer les coins d'un contour circulaire.

< / h2 >

< div classer = 'box1-div' >

Linuxhint fournit le contenu le meilleur et le plus unique pour ses utilisateurs.

< / div >

< div classer = 'box2-div' >

Cela fonctionne sur plusieurs catégories.

< / div >

La sortie du code ci-dessus est illustrée ci-dessous :

Étape 4 : Définissez le contour du premier conteneur

Accédez au premier conteneur en utilisant le ' .box1-div ' classe où le ' . ” est un sélecteur pour accéder à la classe :

.box1-div {

contour : solide ;

largeur : 300px ;

rembourrage : 15px ;

marge : 25px ;

}

Ensuite, appliquez les propriétés CSS répertoriées ci-dessous :

• Les ' contour ” La propriété est utilisée pour ajouter un contour autour de l'élément. Par exemple, sa valeur est définie comme ' solide ”.
• ' largeur ” spécifie la taille de l'élément horizontalement.
• ' rembourrage ” est utilisé pour allouer l'espace autour du contenu de l'élément.
• ' marge ” spécifiez l'espace sur le côté extérieur de la bordure de l'élément.

Étape 5 : Définissez le contour du deuxième conteneur

Maintenant, accédez au deuxième élément à l'aide de sa classe respective ' .box2-div ” :

.box2-div {

contour : solide ;

rayon de bordure : 20px ;

largeur : 300px ;

rembourrage : 15px ;

marge : 25px ;

}

Appliquer la propriété CSS ' rayon de bordure ” pour définir le rayon de l'élément. Cette propriété vous permet d'ajouter des coins arrondis autour de l'élément :

On peut remarquer que nous avons ajouté avec succès l'effet de rayon de contour sur l'élément HTML.

Conclusion

Les ' contour-rayon ' n'est plus disponible. Les utilisateurs peuvent appliquer les propriétés de rayon de contour à l'aide des propriétés CSS 'outline' et 'border-radius'. Les ' contour ' ajoute un contour autour de l'élément, et le ' rayon de bordure ” est spécifiquement utilisé pour styliser le contour. Cet article a démontré les instructions pour ajouter l'effet de rayon de contour autour de l'élément en HTML.