border-radius: 16px;Le générateur de rayon de bordure CSS est un éditeur visuel pour la propriété CSS border-ray. Vous faites glisser un curseur pour chaque coin, regardez un élément de prévisualisation en temps réel et copiez le CSS exact qu'il produit - pas de valeurs de pixels de deviner et recharger 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.
Choisissez un préréglage tel que arrondi, pilule, cercle ou blob pour un point de départ instantané, ou commencez à partir des coins arrondis par défaut.
Faites glisser les curseurs en haut à gauche, en haut à droite, en bas à droite et en bas à gauche pour contourner chaque coin indépendamment, ou définissez-les tous sur la même valeur pour un rayon uniforme.
Basculez entre PX, %, EM et REM. Les pourcentages créent des coins elliptiques par rapport à la taille de l'élément - définissez 50 % sur tous les coins pour créer un cercle ou une ellipse parfaits.
Copiez la déclaration de rayons frontières générée, déjà réduite en raccourcissement valide, puis collez-la dans votre feuille de style.
Les curseurs indépendants pour les quatre coins vous permettent de créer des formes asymétriques telles que les rayons de feuilles, de tabulations et de bulles de parole, pas seulement un arrondi
L'outil réduit automatiquement vos quatre coins au niveau du rayon de bordure équivalent le plus court, ce qui garde votre CSS propre et lisible
Basculez entre PX, %, EM et REM — les pourcentages produisent des angles elliptiques par rapport à la taille de la boîte, c'est-à-dire la façon dont les cercles et les blobs sont créés.
Un élément de prévisualisation se met à jour instantanément au fur et à mesure que vous faites glisser, afin que vous puissiez voir exactement comment les coins sont arrondis avant de copier quoi que ce soit
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!