R_in = max(0, R_out - d)

· 2 min read
#CSS #UI #Design System

중첩된 border-radius는 아래 식으로 잡을 때 시각적으로 가장 안정적인 경우가 많습니다. 그러나 이 공식도 모든 상황에 딱 맞는 만능키는 아니라서, 마지막엔 디자이너 눈으로 보고 조정해야 합니다.

R_in = max(0, R_out - d)

  • R_out: 바깥 요소 반지름
  • d: 바깥 코너에서 안쪽 코너까지 들어간 거리(패딩/보더/인셋 합)

아래 예시는 같은 레이아웃에서 R_in 값만 다르게 준 A/B/C 비교입니다.

  • A: 공식 적용 (R_out - d)
  • B: 과대 반지름 (R_out)
  • C: 과소 반지름 (R_out - d - 4px)

How to use: Pick the card with the most natural corner flow in each row.

Default mode is blind. Reveal answers after you decide.

Case 1

R_out = 24px, d = 8px, Formula target: 16px

Option 1

A: R_in = R_out - d = 16px

Option 2

B: R_in = R_out = 24px

Option 3

C: R_in = R_out - d - 4 = 12px

Case 2

R_out = 16px, d = 4px, Formula target: 12px

Option 1

A: R_in = R_out - d = 12px

Option 2

B: R_in = R_out = 16px

Option 3

C: R_in = R_out - d - 4 = 8px

Case 3

R_out = 12px, d = 6px, Formula target: 6px

Option 1

A: R_in = R_out - d = 6px

Option 2

B: R_in = R_out = 12px

Option 3

C: R_in = R_out - d - 4 = 2px

체크 포인트

  1. 어느 옵션이 코너 흐름이 가장 자연스럽게 이어지는가?
  2. 어떤 옵션이 코너에서 뭉치거나 찢긴 듯한 느낌이 적은가?
  3. 모바일에서도 같은 선택이 나오는가?

참고