[CSS] table border-radius가 안된다?

<table></table>

table 태그에 border-radius 속성을 적용하여 아래 사진처럼

효과를 주려고 했는데 border-radius값을 줘도 적용이 안되고, 개발자 모드(F12)로 확인해도 분명 값은 적용이 되어있는데 변하지가 않아서 찾아보니

table에 border-collapse :collapse 스타일이 적용 되어 있으면
border-radius값이 적용이 되지 않는다고 한다!

대책?

해결 방법으로 border-collapse의 값을 seperate(기본값)등으로 변경하는 방법이 있고,

border-collapse의 값을 collapse로 유지하고 싶다면

테이블을 div로 감싸서 div에 border-radius를 적용하는 방법이 있다!

<div>
  <table></table>
</div>

div {
border-radius : 12px;
}

table {
border-collapse : collapse;
border-style: hidden;
}