CSS Border Radius
CSS 테두리 반경
CSS border-radius는 수평 및 수직 반경을 사용하여 상자의 모서리를 사분원 형태로 만듭니다. 이는 그리기와 클리핑에는 영향을 주지만 상자의 레이아웃 크기를 변경하지 않으며, 수학적 스퀴클을 만들지는 않습니다.
다른 예시
40px 컨트롤은 12px 반지름을 사용하며 200% 줌에서 확인됩니다. 모든 상태에서 목표 크기, 보이는 포커스 윤곽, 올바른 클리핑, 그림자, 동일한 디자인 토큰을 유지합니다. 9999px 반지름은 스퀴클이 아닌 필을 만듭니다.
주요 부분
- 01수평 반경
- 02수직 반경
- 03페인팅 및 클리핑 가장자리
사용할 때
클리핑, 포커스, 그림자 및 대상 크기를 테스트할 때 명확한 반경이 있는 CSS 타원 모서리에 이 용어를 사용하세요.
다음 경우에는 사용하지 마세요
테두리 반경(border radius)을 모호한 스타일 용어로 사용하지 마세요. 큰 반경을 모두 스퀴클(squircle)이라고 부르지 마세요. 클리핑은 사용 가능한 대상의 크기를 줄이면 안 됩니다.
코드에서 사용된 이름
border-radius: horizontal / vertical radii 출시하기 전에
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 CSS 테두리 반경 (CSS Border Radius)。 User context：40px 컨트롤은 12px 반지름을 사용하며 200% 줌에서 확인됩니다. 모든 상태에서 목표 크기, 보이는 포커스 윤곽, 올바른 클리핑, 그림자, 동일한 디자인 토큰을 유지합니다. 9999px 반지름은 스퀴클이 아닌 필을 만듭니다. Design concept to apply：CSS 테두리 반경 (CSS Border Radius)。 Why it fits：클리핑, 포커스, 그림자 및 대상 크기를 테스트할 때 명확한 반경이 있는 CSS 타원 모서리에 이 용어를 사용하세요. Do not use it when：테두리 반경(border radius)을 모호한 스타일 용어로 사용하지 마세요. 큰 반경을 모두 스퀴클(squircle)이라고 부르지 마세요. 클리핑은 사용 가능한 대상의 크기를 줄이면 안 됩니다. 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)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how CSS 테두리 반경 (CSS Border Radius) is used now. Definition: CSS border-radius는 수평 및 수직 반경을 사용하여 상자의 모서리를 사분원 형태로 만듭니다. 이는 그리기와 클리핑에는 영향을 주지만 상자의 레이아웃 크기를 변경하지 않으며, 수학적 스퀴클을 만들지는 않습니다. 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.