최상위 태그의 border 가 solild 4px black 으로 주어진 상황에서
add to cart 란 버튼에 윗줄만 border-top 을 주려고 하면 아래 사진처럼 버튼의 테두리가 부자연스러운 모습을 볼 수 있는데, 이는 버튼 태그는 기본적으로 브라우저에 의해 border 가 1.714로 설정되어 있기 때문입니다.
먼저 border: none 을 주어서 기본 border 를 0으로 만든 후, 추가로 border-top 을 줘야 매끄럽게
처리가 가능해집니다.
'TroubleShooting > CSS' 카테고리의 다른 글
| [tailwind 4] Tailwind CSS에서 배경 이미지와 그라디언트 효과 동시 적용하기 (0) | 2025.01.31 |
|---|---|
| CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm) (0) | 2025.01.31 |
| [CSS] Grid의 Subgrid 속성 이해하기 - 별점 레이아웃 예제 (0) | 2025.01.25 |
| [CSS] margin: 0 auto 중앙 정렬이 작동하지 않는 경우 (0) | 2024.12.13 |
