CSS로 outset 테두리 설정하기
CSS에서 outset(돌출형) 테두리를 설정하려면 border-style 속성의 값을 outset으로 지정하면 됩니다.
outset 값은 테두리가 요소 바깥쪽으로 돌출된 것처럼 보이는 3D 입체 효과를 만들어 줍니다. 이 효과는 테두리 색상이 어느 정도 명확할 때 더 잘 드러나며, 버튼이나 박스 등에 은은한 입체감을 주고 싶을 때 유용하게 활용됩니다.
예제
아래 예제는 테두리 스타일을 none으로 설정한 경우와 outset으로 설정한 경우를 나란히 비교해서 보여줍니다.
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:outset;">
This is outset border.
</p>
</body>
</html>
실행 결과 설명
위 코드를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- 첫 번째 문단:
border-style:none;이 적용되어 테두리가 전혀 표시되지 않습니다. - 두 번째 문단:
border-style:outset;이 적용되어 4px 두께의 테두리가 바깥쪽으로 돌출된 입체적인 모양으로 나타납니다.
참고로 outset 테두리가 화면에 제대로 표시되려면 border-width 속성으로 테두리 두께를 함께 지정해 주는 것이 좋습니다. 두께가 너무 얇으면 3D 효과가 거의 느껴지지 않기 때문입니다.