Le style est une partie importante du développement du site Web HTML, et CSS fournit différents styles pour les éléments HTML; L'un d'eux est de créer une bordure autour de n'importe quel élément. Il est principalement utilisé pour différencier les sections en utilisant des formes de bordure, telles que solides, pointillées, pointillées et doubles.

Le but de ce manuel est d'expliquer comment créer des bordures de coin rondes. Pour cela, premièrement, nous devons connaître le «frontière" propriété. Alors, commençons!

Quelle est la propriété «frontière» dans CSS?

Afin de créer une bordure autour d'un élément, vous devez utiliser le «frontière" propriété. En utilisant cette propriété, vous pouvez définir le «style","couleur", et "largeur«De la frontière.

Syntaxe

La syntaxe de la propriété frontalière est donnée comme suit:

Border: Couleur de style largeur

Voici la description des valeurs ci-dessus:

• largeur: Il est utilisé pour définir la largeur de la bordure.
• style: Il est utilisé pour définir le style de bordure, tel que pointillé, pointillé, solide ou double.
• couleur: Il détermine la couleur de la bordure.

Voici un exemple dans lequel nous implémentons le «frontière" propriété.

Comment créer une bordure à l'aide de CSS?

Pour créer une bordure, ajoutez d'abord un élément dans un fichier html. Pour ce faire, nous créerons un et attribuerons un «coin«Classe à lui. Après cela, nous ajouterons un titre et un paragraphe en utilisant

et

Mots clés:

Indice de linux

Coins ronds dans CSS

Ensuite, nous passerons à la section CSS.

Ici le ".coin”Est ​​utilisé pour accéder à la classe attribuée au . Après cela, nous créerons une bordure en utilisant le «frontière«Propriété et attribuez les valeurs de largeur, de style et de couleur comme«4px","solide", et "RVB (248, 6, 107)", respectivement. De plus, nous ajouterons la largeur "250px", hauteur "150px", Et la couleur d'arrière-plan"RVB (234, 0, 255)"Pour la div:

.coin
Border: 4px RVB solide (248, 6, 107);
Largeur: 250px;
hauteur: 150px;
Color en arrière-plan: RVB (234, 0, 255);

Une fois que vous avez implémenté le code mentionné ci-dessus, accédez au fichier HTML et exécutez-le. Vous verrez le résultat suivant:

Maintenant, nous allons passer à la partie suivante, où nous créerons la bordure carrée jusqu'à la bordure du coin rond.

Comment rond à l'aide de CSS?

Pour créer une bordure de coin rond, le «rayon frontalier«La propriété est utilisée, dans laquelle vous pouvez régler le rayon du coin en fonction de vos préférences.

Syntaxe

La syntaxe de la propriété Border-Radius est donnée ci-dessous:

Border-Radius: valeur

Continuons l'exemple précédent et définissons le radius frontalier pour atteindre les coins ronds.

Exemple

Dans ".coin«Classe du fichier CSS, définissez la valeur de«rayon frontalier«Propriété comme«30px»:

Border-Radius: 30px;

Avec la ligne ci-dessus ajoutée, vous obtiendrez la sortie suivante:

La sortie donnée ci-dessus signifie que les frontières sont transformées avec succès en coins ronds en raison de la propriété Border-Radius.

Conclusion

Dans CSS "rayon frontalier«La propriété est utilisée pour changer le coin des frontières. La forme de la courbe change en fonction de la valeur donnée du rayon. En utilisant la propriété mentionnée, vous pouvez régler le rayon du coin en fonction de votre choix. Dans cet article, nous avons expliqué comment rond les frontières d'angle en utilisant la propriété Border-Radius à l'aide d'un exemple.