CSS Border Radius
Radio de borde en CSS
El border-radius de CSS hace que las esquinas del cuadro sean de cuartos de elipse usando radios horizontales y verticales. Cambia la pintura y el recorte, pero no el tamaño del cuadro en el diseño, y no crea un squircle matemático.
Otro ejemplo
Un control de 40 px utiliza un radio de 12 px y se revisa al 200 % de zoom. Mantiene su tamaño objetivo, el contorno de enfoque visible, el recorte correcto, las sombras y el mismo token de diseño en cada estado. Un radio de 9999 px hace una píldora, no un squircle.
Partes principales
- 01radio horizontal
- 02radio vertical
- 03borde de pintura y recorte
Úsalo cuando
Usa este término para esquinas elípticas de CSS con radios claros mientras se prueban recortes, enfoque, sombras y tamaño objetivo.
No lo uses cuando
No uses border radius como una palabra de estilo vaga. No llames a todo radio grande un squircle. El recorte no debe reducir el objetivo utilizable.
Nombre usado en código
border-radius: horizontal / vertical radii Antes de lanzarlo
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 Radio de borde en CSS (CSS Border Radius). User context: Un control de 40 px utiliza un radio de 12 px y se revisa al 200 % de zoom. Mantiene su tamaño objetivo, el contorno de enfoque visible, el recorte correcto, las sombras y el mismo token de diseño en cada estado. Un radio de 9999 px hace una píldora, no un squircle. Design concept to apply: Radio de borde en CSS (CSS Border Radius). Why it fits: Usa este término para esquinas elípticas de CSS con radios claros mientras se prueban recortes, enfoque, sombras y tamaño objetivo. Do not use it when: No uses border radius como una palabra de estilo vaga. No llames a todo radio grande un squircle. El recorte no debe reducir el objetivo utilizable. 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 documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Radio de borde en CSS (CSS Border Radius) is used now. Definition: El border-radius de CSS hace que las esquinas del cuadro sean de cuartos de elipse usando radios horizontales y verticales. Cambia la pintura y el recorte, pero no el tamaño del cuadro en el diseño, y no crea un squircle matemático. 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.