CSS에서 border-style 속성에 groove 값을 사용하면 마치 페이지 표면에 파여 들어간 듯한 입체적인 테두리를 만들 수 있습니다. groove 스타일은 테두리가 안쪽으로 오목하게 조각된 것처럼 보이도록 명암 효과를 자동으로 적용해 줍니다.
아래 예제 코드를 실행하여 border-style 속성이 실제로 어떻게 동작하는지 직접 확인해 보세요.
예제 코드
<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> 테두리 스타일이 none으로 지정된 문단입니다. </p> <p style = "border-width:4px; border-style:groove;"> 페이지에 새겨진 듯한 테두리가 적용된 문단입니다. </p> </body> </html>
코드 설명
첫 번째 문단에는 border-style:none이 적용되어 테두리가 화면에 나타나지 않습니다. 두 번째 문단에는 border-style:groove와 함께 border-width:4px가 지정되어 있어, 너비 4픽셀의 테두리가 페이지에 파인 듯한 입체 효과로 표시됩니다.
참고로 groove와 반대되는 효과를 내고 싶다면 ridge 값을 사용하세요. ridge는 테두리가 페이지 바깥쪽으로 솟아오른 듯한 모양을 만들어 줍니다. 또한 groove 효과는 테두리 두께가 충분히 클 때 더 뚜렷하게 나타나므로, 최소 3~4px 이상의 border-width를 지정하는 것이 좋습니다.