CSS를 사용하면 HTML 요소의 박스에 테두리 스타일을 쉽게 설정할 수 있습니다. 이를 통해 웹 페이지의 디자인을 꾸밀 수 있습니다.

기본 테두리 스타일 설정하기

HTML 요소의 박스에 기본 테두리를 설정하려면 다음과 같이 CSS를 사용합니다:

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

위의 코드에서 border 프로퍼티는 테두리 두께, 유형 및 색상을 설정합니다. 1px는 두께를 나타내고, solid은 실선 스타일을, #000은 검은색을 나타냅니다.

특정 테두리 스타일 지정하기

때로는 각 측면의 테두리를 다르게 스타일링해야 할 수도 있습니다. 이를 위해 다음과 같이 개별적인 테두리 스타일을 설정할 수 있습니다:

.box {
  border-top: 2px dashed #f00;
  border-bottom: 2px dotted #00f;
  border-left: 2px double #0f0;
  border-right: 2px groove #ff0;
}

위의 예에서 border-top, border-bottom, border-left, border-right는 각각 상단, 하단, 좌측, 우측의 테두리를 설정합니다.

둥근 테두리 만들기

테두리를 둥글게 만들 수도 있습니다. 다음과 같이 border-radius 프로퍼티를 사용하여 박스의 테두리를 둥글게 설정할 수 있습니다:

.box {
  border-radius: 5px;
}

위의 코드에서 5px는 테두리의