[CSS] 테두리의 스타일, 색상, 너비를 정의 {border:}

border(테두리) 속성은 요소 border의 스타일, 색상 및 너비를 정의하는 데 사용됩니다.

요소를 둘러싸는 선을 만들어 주변 또는 웹 페이지의 다른 요소와 시각적으로 구분할 수 있습니다.

border 속성은 border-width, border-style 및 border-color와 같은 테두리와 관련된 개별 속성을 단일 선언으로 결합하는 속기입니다.

border 속성의 구문은 다음과 같습니다.

selector {
  border: [border-width] [border-style] [border-color];
}

 

개별 구성 요소는 선택 사항이지만 하나 이상의 값을 포함해야 합니다. 다음은 각 구성 요소에 대한 분석입니다.
[border-width] : 테두리의 너비를 지정합니다. 길이 값(예: 1px, 2rem, 3em), 키워드 값(예: thin, medium, thick) 또는 네 가지 길이 값의 조합(예: , 1px 2px 3px 4px, 각각 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리를 나타냄).

[border-style] : 테두리의 스타일을 정의하며 다음 값 중 하나일 수 있습니다

- none(테두리 없음)

- hidden(none과 유사하지만 다르게 렌더링될 수 있음)

- 'dotted'(점선), 'dashed'(점선), 'solid'(실선), 'double'(두 개의 평행한 실선), 'groove'(3D 그루브 테두리), 'ridge'(3D 융기 테두리) , 'inset'(3D 인세트 테두리) 또는 'outset'(3D 아웃세트 테두리).
[border-color] : 테두리 색상을 설정합니다. 색상 이름, HEX 코드, RGB 값 또는 HSL 값을 사용하여 색상을 지정할 수 있습니다.

단순한 검은색 테두리:

div {
  border: 1px solid #000000;
}

 

다양한 너비의 빨간색 점선 테두리:

.button {
  border: 2px dotted red;
}

 

스타일이 다른 개별 테두리 구성 요소:

.section {
  border-width: 1px 2px 3px 4px;
  border-style: solid dotted dashed double;
  border-color: #00ff00 #0000ff #ff0000 #000000;
}

위의 마지막 예에서 개별 테두리 속성은 각 측면에 대해 개별적으로 지정되어 각 테두리에 대해 서로 다른 스타일과 색상의 조합을 만듭니다.


'border' 속성은 웹 디자인에서 시각적 신호를 추가하고, 요소를 분리하고, 장식 효과를 만드는 데 널리 사용됩니다. 또한 'border-radius'로 둥근 테두리를 적용하거나 CSS 레이아웃 및 디자인 내에서 요소의 전체 테두리를 제어하는 ​​데 유용할 수 있습니다.