CSS를 사용하여 요소 주위에 테두리를 만들 수 있습니다. 테두리의 두께, 스타일, 색상 및 모서리를 설정할 수 있어서 디자인에 다양한 효과를 줄 수 있습니다.

테두리 설정

테두리를 설정하기 위해서는 border 속성을 사용합니다. 간단한 박스에 테두리를 추가하는 예제는 다음과 같습니다:

.box {
  border: 2px solid #000;
}

위 예제에서, .box 클래스에 2픽셀 두께의 검은색 실선 테두리를 설정합니다.

다양한 테두리 스타일 설정

테두리 스타일을 설정하여 요소에 다양한 외곽선을 만들 수 있습니다. 여러 가지 스타일 중 하나를 선택하여 테두리를 만들 수 있습니다. 예를 들어, 점선 스타일의 테두리를 만드는 방법은 다음과 같습니다:

.dotted-border {
  border: 2px dotted #000;
}

테두리 모서리 둥글게 만들기

border-radius 속성을 사용하여 테두리의 모서리를 둥글게 만들 수 있습니다. 예를 들어, 10픽셀의 둥근 모서리를 가진 요소의 테두리 설정은 다음과 같습니다:

.rounded-border {
  border: 2px solid #000;
  border-radius: 10px;
}

CSS를 사용하여 테두리를 디자인하는 방법은 다양합니다. 이러한 기술을 활용하여 웹페이지의 디자인을 향상시킬 수 있습니다.

자세한 내용은 MDN web docs를 참조하세요.