CSS Border Radius
Borda Arredondada em CSS
O border-radius em CSS cria cantos arredondados usando elipses de quarto de círculo com raios horizontais e verticais. Ele altera a pintura e o recorte, mas não o tamanho do layout da caixa, e não cria um squircle matemático.
Outro exemplo
Um controle de 40 px usa um raio de 12 px e é verificado em 200% de zoom. Ele mantém seu tamanho alvo, contorno de foco visível, recorte correto, sombras e o mesmo token de design em todos os estados. Um raio de 9999 px cria uma forma de pílula, não um squircle.
Partes principais
- 01raio horizontal
- 02raio vertical
- 03borda de pintura e recorte
Use-o quando
Use este termo para cantos elípticos de CSS com raios claros enquanto testa recorte, foco, sombras e tamanho do alvo.
Não o use quando
Não use border radius como uma palavra vaga de estilo. Não chame todo raio grande de squircle. O recorte não deve diminuir o alvo utilizável.
Nome usado no código
border-radius: horizontal / vertical radii Antes de lançar
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 Borda Arredondada em CSS (CSS Border Radius). User context: Um controle de 40 px usa um raio de 12 px e é verificado em 200% de zoom. Ele mantém seu tamanho alvo, contorno de foco visível, recorte correto, sombras e o mesmo token de design em todos os estados. Um raio de 9999 px cria uma forma de pílula, não um squircle. Design concept to apply: Borda Arredondada em CSS (CSS Border Radius). Why it fits: Use este termo para cantos elípticos de CSS com raios claros enquanto testa recorte, foco, sombras e tamanho do alvo. Do not use it when: Não use border radius como uma palavra vaga de estilo. Não chame todo raio grande de squircle. O recorte não deve diminuir o alvo utilizável. 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): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Borda Arredondada em CSS (CSS Border Radius) is used now. Definition: O border-radius em CSS cria cantos arredondados usando elipses de quarto de círculo com raios horizontais e verticais. Ele altera a pintura e o recorte, mas não o tamanho do layout da caixa, e não cria um 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.