CSS를 사용하여 HTML 요소의 테두리 모양을 조절하는 것은 웹 디자인에서 중요한 부분입니다. 박스의 테두리를 둥글게 만들거나, 그림자 효과를 추가하거나, 여러 가지 스타일을 적용하여 디자인을 개선할 수 있습니다.

박스의 외곽선 변경

HTML 요소의 테두리 스타일을 변경하려면 border 속성을 사용합니다. 예를 들어, 아래의 CSS 코드를 사용하여 테두리의 둥글기를 조절할 수 있습니다.

.rounded-box {
  border-radius: 10px;
}

border-radius 속성을 사용하면 요소의 테두리를 둥글게 만들 수 있습니다. 값은 픽셀 단위로 조절할 수 있습니다.

그림자 효과 추가

박스에 그림자 효과를 추가하여 요소를 더 동적으로 만들 수 있습니다. box-shadow 속성을 사용하여 다양한 그림자 효과를 만들 수 있습니다. 예를 들어,

.shadowed-box {
  box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.3);
}

위의 코드는 요소에 3px 오른쪽, 3px 아래로 그림자를 표시하고, 그림자의 흐림 정도와 투명도를 설정합니다.

기타 테두리 스타일

테두리의 스타일을 변경하기 위해 border 속성을 사용할 수 있습니다. 예를 들어, 아래의 코드는 테두리의 두께와 색상을 변경합니다.

.custom-border {
  border: 2px dashed #f00;
}

위의 코드에서는 border 속성을 사용하여 2px 두께의 점선 스타일의 빨간색 테두리를 만듭니다.

위의 예제들을 사용하여 HTML 요소의 테두리 모양을 자유롭게 조절할 수 있습니다. CSS의 다양한 속성을 활용하여 창의적인 디자인을 만들어보세요.