CSS Border Radius
Rayon de bordure CSS
La propriété border-radius CSS transforme les coins des boîtes en quarts d'ellipse en utilisant des rayons horizontaux et verticaux. Elle modifie la peinture et le masquage, mais pas la taille de la boîte dans la mise en page, et ne crée pas un squircle mathématique.
Un autre exemple
Un contrôle de 40 px utilise un rayon de 12 px et est vérifié à un zoom de 200 %. Il conserve sa taille cible, le contour visible de focus, le découpage correct, les ombres et le même jeton de conception dans chaque état. Un rayon de 9999 px crée une pilule, pas un squircle.
Parties principales
- 01rayon horizontal
- 02rayon vertical
- 03peinture et bord de découpe
Utilisez-le lorsque
Utilisez ce terme pour les coins ellipse CSS avec des rayons clairs lors des tests de découpage, de focus, d'ombres et de taille cible.
Ne l'utilisez pas lorsque
N'utilisez pas le rayon de bordure comme un mot de style vague. N'appelez pas chaque grand rayon un squircle. Le rognage ne doit pas réduire la cible utilisable.
Nom utilisé dans le code
border-radius: horizontal / vertical radii Avant d'expédier
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Rayon de bordure CSS (CSS Border Radius). User context: Un contrôle de 40 px utilise un rayon de 12 px et est vérifié à un zoom de 200 %. Il conserve sa taille cible, le contour visible de focus, le découpage correct, les ombres et le même jeton de conception dans chaque état. Un rayon de 9999 px crée une pilule, pas un squircle. Design concept to apply: Rayon de bordure CSS (CSS Border Radius). Why it fits: Utilisez ce terme pour les coins ellipse CSS avec des rayons clairs lors des tests de découpage, de focus, d'ombres et de taille cible. Do not use it when: N'utilisez pas le rayon de bordure comme un mot de style vague. N'appelez pas chaque grand rayon un squircle. Le rognage ne doit pas réduire la cible utilisable. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un document officiel peut quand même être un brouillon, un release candidate, ou la version finale. Vérifie son statut et sa compatibilité avec le navigateur ou la plateforme. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Rayon de bordure CSS (CSS Border Radius) is used now. Definition: La propriété border-radius CSS transforme les coins des boîtes en quarts d'ellipse en utilisant des rayons horizontaux et verticaux. Elle modifie la peinture et le masquage, mais pas la taille de la boîte dans la mise en page, et ne crée pas un squircle mathématique. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.