Border Radius Generator
Generate border radius
Generate border radius S'exécute localement dans votre navigateur
border-radius: 12px;
About the
Le Border Radius Generator définit les quatre coins d'une boîte indépendamment, avec un aperçu en direct, et vous donne le CSS. L'ordre de la sténographie est ce que tout le monde oublie : c'est en haut à gauche, en haut à droite, en bas à droite, en bas à gauche, en allant dans le sens des aiguilles d'une montre à partir du haut à gauche. Une valeur s'applique aux quatre coins, deux valeurs s'appliquent aux paires diagonales et quatre valeurs s'adressent tour à tour à chaque coin. Lorsque les quatre correspondent, l’outil émet le formulaire à valeur unique, qui est celui que vous souhaitez réellement la plupart du temps.
Where people use the
- Faire correspondre un rayon à une spécification de conception sans deviner les valeurs des pixels.
- Arrondir uniquement les coins supérieurs d’une carte ou d’un modal.
- Façonner un bouton de pilule, dont le rayon correspond à la moitié de la hauteur de l'élément.
- Trouver le rayon qui transforme un avatar carré en cercle.
How to use the
- 1
Faites glisser un curseur de coin
Chaque coin possède son propre curseur de 0 à 150 pixels. La zone d’aperçu s’arrondit à mesure que vous la déplacez.
- 2
Gardez les coins liés ou dissociez-les
Avec Link activé, déplacer n’importe quel curseur déplace les quatre ensemble. Désactivez-le pour façonner des coins individuels, c'est ainsi que vous créez une queue de bulle ou une forme de feuille.
- 3
Lire le CSS
Si les quatre correspondent, vous obtenez le raccourci à valeur unique. S'ils diffèrent, vous obtenez la forme complète à quatre valeurs dans le sens des aiguilles d'une montre.
- 4
Considérez plutôt un pourcentage
Un rayon de 50 pour cent sur un élément carré donne un cercle. Remplacez l'unité px par un pourcentage dans votre feuille de style si c'est ce dont vous avez besoin.
Conseils et bonnes pratiques
- Utilisez des pourcentages lorsque l'élément est redimensionné, des pixels dans le cas contraire.
- Un bouton de pilule n’est pas un rayon fixe ; c'est la moitié de la hauteur, donc 9999px est la réponse paresseuse mais robuste.
- Gardez le rayon cohérent sur un ensemble de composants ; mélanger 4px, 6px et 8px semble accidentel.
Questions fréquemment posées
Dans quel ordre sont les quatre valeurs ?
Dans le sens des aiguilles d'une montre en partant du haut à gauche : en haut à gauche, en haut à droite, en bas à droite, en bas à gauche. Un mnémonique utile est qu’il commence là où vous commencez à lire et se déroule comme un cadran d’horloge.
Que signifient deux ou trois valeurs ?
Deux valeurs définissent les diagonales : la première est en haut à gauche et en bas à droite, la seconde est en haut à droite et en bas à gauche. Trois valeurs définies en haut à gauche, puis en haut à droite et en bas à gauche ensemble, puis en bas à droite.
Comment faire un cercle ?
Utilisez 50 pour cent sur un élément déjà carré. L'utilisation de pixels ne donne un cercle que si le rayon est égal à la moitié de la largeur, ce qui se brise au moment où l'élément est redimensionné.
Puis-je arrondir les coins différemment horizontalement et verticalement ?
La syntaxe complète autorise un rayon elliptique écrit sous forme de valeurs horizontales, une barre oblique, puis des valeurs verticales. Cet outil émet la forme uniforme la plus simple, alors ajoutez la version barre oblique à la main si vous avez besoin de cette forme.
Pourquoi mon coin arrondi est-il coupé ?
Parce que le contenu enfant n'est pas découpé dans la zone arrondie. Ajoutez un débordement caché à l'élément, sinon l'image ou l'arrière-plan à l'intérieur affichera toujours des coins carrés.