Border Radius, Bordures et Contours : Ce Qui Survit à un Import

Trois propriétés CSS dessinent le bord d'une boîte : border-radius, border et outline. Dans l'inspecteur d'un navigateur, elles se trouvent juste l'une à côté de l'autre, presque collées. Après un import dans Figma, elles cessent de se comporter comme une même famille. L'une survit coin par coin, mais perd une courbe que Figma sait dessiner et que CSS ne sait pas exprimer. Les deux autres se séparent le long d'une ligne que CSS avait déjà tracée, entre ce qui compte comme une bordure et ce qui compte comme un contour, et cette ligne décide si un trait pousse votre mise en page ou reste simplement posé comme de la peinture.

Si vous reconstruisez une page sans fichier source, savoir laquelle de ces trois propriétés survit, et sous quelle forme, évite une relecture manuelle à deviner quels coins étaient arrondis et quel trait était purement décoratif. UnHTML lit le CSS propre d'une page pour reconstruire ces formes plutôt que de deviner à partir d'une capture d'écran, et s'exécute entièrement sur votre machine sans envoyer le contenu de la page. C'est pourquoi la correspondance ci-dessous décrit exactement ce à quoi s'attendre : ce que border-radius conserve et perd en arrivant dans Figma, comment border et outline se séparent en deux types de trait différents, et ce qu'il faut vérifier en premier une fois qu'un import atterrit dans votre fichier.

border-radius : les quatre coins et la syntaxe à barre oblique

border-radius en CSS est un raccourci pour quatre propriétés longues : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Elle accepte un à quatre valeurs, appliquées dans cet ordre. Une valeur fixe les quatre coins. Deux valeurs fixent la paire haut-gauche/bas-droite, puis la paire haut-droite/bas-gauche. Trois valeurs fixent haut-gauche, puis la paire haut-droite/bas-gauche, puis bas-droite. Quatre valeurs fixent chaque coin individuellement, en commençant en haut à gauche et en tournant dans le sens horaire. MDN documente la même expansion à quatre coins que n'importe quel panneau de styles calculés d'un navigateur afficherait.

border-radius prend aussi en charge une syntaxe à barre oblique pour des coins elliptiques : les valeurs avant la barre fixent les rayons horizontaux, celles après fixent les rayons verticaux. border-radius: 10px / 20px dessine chaque coin comme une ellipse de 10px de large sur 20px de haut plutôt qu'un cercle de 10px. Les valeurs en pourcentage se résolvent par rapport à la largeur propre de la boîte sur l'axe horizontal et à sa hauteur propre sur l'axe vertical, ce qui explique pourquoi un élément haut et étroit et un élément bas et large peuvent utiliser le même pourcentage et obtenir des courbes visiblement différentes.

Quand UnHTML importe une page, la valeur de rayon calculée de chaque coin se transpose directement dans les champs de rayon de coin indépendant de Figma, mesurés dans les pixels indépendants de la densité que Figma utilise en interne. Si le CSS source fixait quatre valeurs de coin différentes, les quatre sont transposées individuellement, sans moyenne et sans en choisir une seule. La documentation de Figma sur le rayon de coin décrit le même panneau de coins indépendants, accessible en activant "Independent corners" dans la barre latérale droite.

Ce qui ne survit pas, c'est le lissage des coins. Figma appelle cet effet un "squircle" : une courbe continue entre un carré et un cercle, popularisée par le design iOS, avec son propre curseur dans le panneau de rayon de coin et un bouton de préréglage rapide iOS qui fixe le lissage à 60%. CSS n'a aucune propriété qui exprime cette courbe. border-radius ne décrit qu'un arc circulaire ou elliptique, donc tout import arrive à 0% de lissage, un simple arc, même si la page en ligne avait été rendue avec quelque chose qui s'en approchait. Envie du look squircle ? Ajoutez-le à la main après l'import. Le CSS ne l'a jamais eu pour le transmettre.

Border contre outline, et pourquoi un seul des deux survit comme forme

CSS maintient border et outline conceptuellement séparés, et cette séparation compte davantage après un import que sur la page en ligne. border fait partie du modèle de boîte : il a une largeur, se situe à l'intérieur du bord extérieur de l'élément, et le modifier change la quantité d'espace occupée par l'élément et ses voisins. outline se situe à l'extérieur du border et, comme MDN le formule clairement, "les contours ne prennent pas de place, donc ils n'affectent en rien la mise en page du document." outline-offset peut encore repousser l'outline plus loin, et cet espace reste tout aussi invisible pour la mise en page : rien d'autre sur la page ne se déplace pour lui faire de la place.

L'auto layout actuel de Figma a été conçu pour refléter cette séparation. Le propre guide de Figma sur auto layout et CSS Flexbox énonce la correspondance directement : un trait intérieur se comporte comme une border et est inclus dans la mise en page par défaut, tandis qu'un trait centré ou extérieur se comporte comme un outline et reste exclu de la mise en page, même quand le réglage "stroke included in layout" d'un frame est activé. C'est un choix délibéré, pas un oubli. Figma veut qu'un trait intérieur puisse pousser la taille minimale d'un frame comme le ferait une border CSS, et veut qu'un trait centré ou extérieur se pose sur la mise en page sans jamais y être autorisé.

En dehors d'un frame en auto layout, la distinction se resserre de nouveau. La documentation de Figma sur les propriétés de trait affirme que "le poids d'un trait n'est pas inclus dans les dimensions globales du calque" par défaut, quel que soit l'alignement du trait, intérieur, centré ou extérieur. Le cadre de délimitation affiché dans la barre latérale conserve la même taille dans tous les cas. Ce n'est qu'à l'intérieur d'un frame en auto layout, et seulement si l'on active explicitement "include stroke in layout," que le poids du trait commence à compter dans les dimensions d'un calque.

En pratique : une border CSS sur un élément importé devient un trait intérieur qui se comporte comme la border d'origine au sein de l'auto layout. Un outline CSS devient un trait centré ou extérieur qui s'affiche correctement comme de la peinture mais ne pousse jamais un élément voisin comme le ferait une vraie border. La forme est correcte dans les deux cas. Le comportement de mise en page n'est correct que si l'on savait de quelle propriété CSS il venait.

Ce que l'import conserve, et ce qu'il aplatit

Mises côte à côte, les trois propriétés se répartissent en conserver, convertir et aplatir :

• border-radius : conservé exactement, coin par coin, y compris les rayons elliptiques avec la syntaxe à barre oblique. Transposé un pour un dans les champs de rayon de coin indépendant de Figma.
• Lissage des coins : non conservé, car CSS n'a rien à transmettre. Tout import démarre à 0% de lissage et nécessite le curseur squircle appliqué à la main si ce look est souhaité.
• border : conservé comme un trait intérieur, inclus dans la mise en page de la même façon que la border d'origine.
• outline : conservé comme un trait centré ou extérieur, visible comme de la peinture mais exclu de la mise en page, ce qui correspond au fait qu'un outline CSS n'a jamais affecté la mise en page non plus.

Un point qui vaut la peine d'être vérifié à la main n'est pas une erreur de l'import, c'est une décision déjà prise par la page source. Si une page a fixé outline: none ou outline: 0 sur un élément interactif, cette suppression survit dans le fichier Figma exactement comme elle a été écrite, parce que l'import reste fidèle au CSS tel qu'il a été rédigé. Le critère de succès 2.4.7 du WCAG 2.1, Focus Visible, exige un indicateur de focus visible sur tout élément interactif. Une page qui avait déjà désactivé son outline de focus par défaut transporte ce manque directement dans votre refonte. C'est une décision de design à revoir, pas un bug à signaler.

Un fait daté à garder en tête : outline est Baseline, largement disponible, depuis mars 2023, et border-radius est Baseline, largement disponible, depuis juillet 2015. Tout site raisonnablement récent que vous importez aura les deux propriétés actives quelque part sur la page. C'est exactement pour cela que la correspondance entre CSS et les traits de Figma compte pour presque tout import, pas seulement pour un cas particulier.

Questions Fréquentes

Consultez le bloc de questions fréquentes accompagnant cet article pour des réponses sur la fidélité exacte du rayon, sur la raison pour laquelle un outline devient une forme séparée, et sur le maintien ou non d'un outline de focus manquant.

border-radius survit à un import coin par coin, y compris les rayons elliptiques, mais perd la courbe de lissage des coins de Figma, puisque CSS n'a aucune propriété qui la décrit. border et outline survivent aussi, simplement comme deux alignements de trait différents avec deux comportements de mise en page différents : un trait intérieur qui compte pour la taille d'un frame, et un trait centré ou extérieur qui dessine la même ligne sans jamais rien pousser d'autre sur le canevas. Après tout import, ces deux points méritent d'être vérifiés en premier : le bon alignement de trait est-il arrivé sur le bon élément, et un coin a-t-il besoin que son lissage soit ajouté de nouveau à la main.