[css] 쇼핑몰 테이블(border)이 이미지에 가려 안보일때 overflow 설정

상품 이미지가 앞에 차지해 border 끝부분이 깨지는 현상이 생길때 쓸 수 있는 overflow 코드

 

 

 

 

 

 

해당 문제되는 부분의 개발자도구를 열어보면 

따로 overflow가 적용되어 있지않음을 확인.

 

 

 

 

 

.product-card {
  width: 180px;
  height: 300px;
  margin-right: 12px;
  margin-bottom: 12px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 12px;
  overflow: hidden;
}

해당 css 코드에서 over flow를 적용시켜줍니다.

 

 

 

 

새로고침을 시켜 확인한 결과 테두리가 잘 출력되고 있음을 확인.