Le but de ce manuel est d'expliquer comment créer des bordures à coins arrondis. Pour cela, d'abord, nous devons connaître le ' frontière ' propriété. Alors, commençons !
Qu'est-ce que la propriété 'border' en 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é border est donnée par :
frontière : largeur style couleur
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é, tireté, 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, commencez par ajouter un élément dans un fichier HTML. Pour ce faire, nous allons créer un
et
:
< corps >
< div classer = 'coin' >
< h1 > Indice Linux < / h1 >
< p > Coins arrondis en CSS < / p >
< / div >
< / corps >
Ensuite, nous allons passer à la section CSS.
Ici le ' .coin ” est utilisé pour accéder à la classe affectée à la
.coin {
frontière : 4px solide RVB ( 248 , 6 , 107 ) ;
largeur : 250px ;
la taille : 150px ;
Couleur de l'arrière plan : RVB ( 2. 3. 4 , 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 allons créer la bordure carrée jusqu'à la bordure du coin rond.
Comment Arrondir les Coins avec CSS ?
Pour créer une bordure à coins arrondis, le ' rayon de bordure ” est utilisée, dans laquelle vous pouvez définir 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 :
rayon de bordure : évaluerContinuons l'exemple précédent et définissons border-radius pour obtenir des coins arrondis.
Exemple
Dans ' .coin ' classe du fichier CSS, définissez la valeur de ' rayon de bordure « propriété en tant que » 30px ” :
rayon de bordure : 30px ;Avec la ligne ci-dessus ajoutée, vous obtiendrez la sortie suivante :
La sortie ci-dessus signifie que les bordures sont transformées avec succès en coins arrondis en raison de la propriété border-radius.
Conclusion
En CSS ' rayon de bordure ” 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 définir le rayon du coin selon votre choix. Dans cet article, nous avons expliqué comment arrondir les bordures des coins à l'aide de la propriété border-radius à l'aide d'un exemple.