Borders arrondis dans CSS
- Comment fonctionne le rayon de la frontière
- Comment obtenir les bordures arrondies dans CSS
Comment obtenir des bordures arrondies dans CSS
Les frontières arrondies sont sauvegardées par la propriété Border-Radius du CSS. Nous allons d'abord examiner le fonctionnement de la propriété Border-Radius, puis fournirons quelques exemples.
Comment fonctionne Border-Radius
La propriété Border-Radius est la propriété scom qui comprend les propriétés énoncées ci-dessous:
Border-top-left-radius, border-top-droite-radius, border-left-bottom-radius et border droite-radius.
Principalement le fonctionnement de la radius frontalière dépend de la syntaxe suivante:
Border-Radius: valeur;Comme la propriété Border-Radius est une propriété raccourci de quatre propriétés enfants, elle peut accepter plus que la valeur. Si vous voulez avoir un rayon différent pour diverses frontières, alors vous pouvez choisir l'une des possibilités suivantes.
autour de toutes les bordures de la même taille
Border-Radius: valeur;Top-gauche rond / inférieur-droit et top-droit / inférieur à gauche à la même taille
Border-Radius: Value1 Value2;Borders en haut à gauche, haut-droit et en bas à droite
Border-Radius: Value1 Value2 Value3;Si vous voulez obtenir des bordures arrondies avec différentes tailles
Border-Radius: Value1 Value2 Value3 Value4;Les exemples à venir sont pratiqués en utilisant la syntaxe fournie ci-dessus.
Exemple 1: Obtenir les bordures arrondies
Le code fourni ci-dessous est exécuté pour obtenir les bordures arrondies
Bienvenue à Linuxhint
Valey of Tech
Guides sur HTML
Guides sur CSS
Le code est décrit comme,
- Inside Tag, les classes Dour sont faites nommées «One», «Two», «Three» et «Four»
- Une classe «un» complètera toutes les frontières à 20px,
- La classe «deux» tournera les bordures supérieure à gauche / en bas à droite et en haut à droite / inférieur à gauche à 25px et 25px.
- La classe «trois» tourne trois bordures supérieure-gauche, top-droite et en bas à droite
- La classe Dour complètera toutes les frontières à différentes tailles
- À l'intérieur de la balise, quatre paragraphes sont déclarés qui montrent l'utilisation des quatre classes CSS mentionnées dans la balise
L'image du code est fournie ci-dessous
L'image de la sortie sur la page Web ci-dessous:
Exemple 2: Obtenez la bordure arrondie de choix
L'exemple ci-dessus arrête les frontières dans l'ordre prédéfini. Par exemple, si vous utilisez une valeur avec une propriété Border-Radius, toutes les frontières seraient arrondies, de même, si trois valeurs sont fournies, la bordure inférieure à gauche ne sera pas arrondie.
Disons, nous ne voulons pas arrondir la bordure du bas à droite. Dans de telles situations, vous devez utiliser quatre valeurs et utiliser 0px à la place de la bordure du bas à droite. Le code suivant est utilisé pour pratiquer l'exemple de bordure arrondie de choix:
Bienvenue à Linuxhint
Le code ci-dessus est décrit comme:
- La propriété Border-Radius est définie dans la balise de style où le 0px est utilisé pour sauter l'arrondissement de la bordure en bas à droite
- Le style frontière est utilisé pour une meilleure visibilité
- Dans le corps, un paragraphe est écrit sur lequel la bordure arrondi est utilisée
L'image de l'éditeur de code s'affiche ci-dessous:
Sortir
Après avoir traversé cela, vous auriez appris le fonctionnement du rayon frontalier et de ses propriétés associées dans divers scénarios.
Conclusion
La propriété Border-Radius facilite l'obtention des frontières arrondies dans CSS. Le Radius frontalier est la propriété à faible main et contient des fonctionnalités de quatre propriétés. Cet article montre les façons possibles d'obtenir les frontières arrondies dans CSS. Pour ce faire, nous avons présenté le fonctionnement de la propriété Border-Radius dans CSS. De plus, pour une meilleure compréhension, nous avons également démontré plusieurs exemples pour vous amener aux frontières arrondies de CSS en utilisant la propriété Border-Radius.