CSS 테이블 둥근 모서리 적용하는 방법

기본적으로 CSS 둥근 모서리를 설정하기 위해서는 border-radius 속성을 사용하여 적용을 할 수가 있지만 테이블의 경우에는 이가 적용되지 않습니다.

box-shadow 속성을 추가하여 줌으로써 간단하게 적용을 할 수가 있습니다.

CSS 테이블 둥근 모서리 적용하는 방법

border-radius 속성 적용

See the Pen table border #1 by 1730 (@1730) on CodePen.

위와 같이 border-radius: 10px 속성을 추가하였음에도 테두리의 변화는 없습니다.

box-shadow 속성 적용

See the Pen table border #2 by 1730 (@1730) on CodePen.

box-shadow 속성을 추가하여 해결이 가능하지만 이때 inset으로 적용해야 합니다. 

설정에 따라 다르겠지만 단순 테두리를 적용하려면 속성값도 X, Y 및 blur 값도 0으로 하고 spread 값만 설정해 줍니다. 이때, spread 값이 테두리의 두께가 됩니다. 

box-shadow 적용하면 기존 테두리와 중복으로 표현이 되기 때문에 border-radius 적용되지 않는 기존 테두리는   border-style: hidden; 속성을 추가 하여 숨겨줍니다.

css 제목 H2,3,4 태그 자동번호 매기기