Générateur de rayon de bordure CSS

Le générateur de rayon de bordure CSS est un éditeur visuel pour la propriété CSS border-radius Vous faites glisser un curseur pour chaque coin, regardez un élément d'aperçu rond en temps réel et copiez le CSS exact qu'il produit - sans deviner les valeurs des pixels et en rechargeant la page.

La propriété Border-Radus semble simple mais a une raccourci compact qui fait avancer les gens : une valeur parcourt les quatre coins, deux valeurs définissent les deux diagonales et quatre valeurs s'exécutent dans le sens des aiguilles d'une montre à partir du haut à gauche. Cet outil vous permet de définir chaque coin indépendamment, puis génère automatiquement le raccourci équivalent le plus court, de sorte que votre CSS reste propre.

Tout fonctionne dans votre navigateur. Commencez à partir d'un préréglage comme une carte, une pilule, un cercle ou un blob, ajustez chaque coin, basculez l'unité entre les pixels et les pourcentages et copiez la déclaration. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.

Les pourcentages et les pixels se comportent différemment sur tout ce qui n'est pas carré, et la différence surprend les gens Un rayon de pixel est la même courbe sur chaque coin, tandis qu'un pourcentage est mesuré contre chaque axe séparément, donc 50 pour cent sur une boîte large donne une ellipse plutôt qu'un cercle C'est la propriété qui transforme un rectangle en pilule ou en forme de lentille La spécification vous protège également de la géométrie impossible : lorsque les rayons le long d'un bord totalisent plus que la longueur de ce bord, le navigateur met à l'échelle chaque rayon sur l'élément proportionnellement vers le bas plutôt que de les chevaucher, donc une grande valeur cesse tranquillement de croître La sortie utilise le raccourci valide le plus court, c'est pourquoi quatre coins égaux s'effondrent à un nombre unique.

En tant que générateur CSS de rayon frontière, la partie utile est qu'il fait l'arithmétique sténographique pour vous Définissez Haut Gauche et Bas Droite à 24 et Haut Droite et Bas Gauche à 8, en px, et la sortie lit border-radius : 24 px 8 px ; car les paires diagonales correspondent Drop Bottom Right à 0 et il devient le générateur de rayon frontière CSS de trois valeurs 24 px 8 px 0 px, puisque Haut Droite et Bas Gauche correspondent toujours Vous pouvez vérifier chaque résultat par rapport à l'aperçu avant de copier, ce à quoi sert un générateur de rayon frontière CSS.