그만큼 국경 요소에 테두리를 추가하는 데 사용되는 CSS의 단축 속성입니다. 상자의 테두리를 지정할 수 있습니다. 테두리의 너비, 스타일 및 색상을 설정합니다. 이 CSS 속성에는 다음 테두리 속성이 포함됩니다.

테두리 너비:border-width 속성은 테두리의 너비를 설정하는 데 사용됩니다. 사전 정의된 값을 사용할 수도 있습니다. 얇은, 중간, 그리고 두꺼운 테두리의 너비를 설정합니다. 테두리의 두께를 설정합니다. 기본값은 다음과 같습니다. 중간 .
이 속성은 단독으로 사용할 수 없습니다. 테두리를 먼저 설정하려면 항상 'border-style' 속성과 같은 다른 테두리 속성과 함께 사용됩니다. 그렇지 않으면 작동하지 않습니다.
테두리의 너비는 각 면마다 다를 수 있습니다. border-bottom-width를 사용하여 수행할 수 있습니다. 테두리 상단 너비, 테두리 오른쪽 너비 , 그리고 테두리 왼쪽 너비 .테두리 스타일:이 속성은 테두리 스타일을 지정합니다. 테두리가 실선, 점선, 점선, 이중, 홈 및 기타 가능한 값 중 하나인지 정의합니다. 이 속성을 설정하지 않으면, 즉 테두리 스타일을 설정하지 않으면 다른 테두리 속성이 작동하지 않습니다. 지정하지 않으면 테두리가 보이지 않습니다. 테두리 스타일 . 이는 이 CSS 속성의 기본값이 다음과 같기 때문입니다. 없음 .
비슷하다 테두리 너비 , 테두리의 스타일은 각 측면마다 다를 수 있습니다. 속성을 사용하여 수행할 수 있습니다. 테두리 하단 스타일, 테두리 상단 스타일, 테두리 오른쪽 스타일 , 그리고 국경 왼쪽 스타일 .테두리 색상:테두리 색상을 변경할 수 있습니다. 색상 이름, RGB 값 또는 Hex 값을 사용하여 색상을 설정할 수 있습니다. 유사하다 테두리 너비 그리고 테두리 스타일 , 테두리 색상을 개별적으로 변경할 수 있습니다. 즉, 요소 ​​테두리의 아래쪽, 위쪽, 왼쪽 및 오른쪽 색상을 변경할 수 있습니다. 속성을 사용하여 수행할 수 있습니다. 테두리 하단 색상, 테두리 상단 색상, 테두리 오른쪽 색상 , 그리고 테두리 왼쪽 색상 .
그만큼 테두리 색상 재산은 단독으로 사용할 수 없습니다. 테두리를 설정하려면 'border-style' 속성과 같은 다른 테두리 속성과 함께 사용해야 합니다. 그렇지 않으면 작동하지 않습니다.

테두리 대 윤곽선

테두리와 윤곽선은 매우 유사하지만 윤곽선과 테두리 사이에는 다음과 같은 몇 가지 차이점이 있습니다.

• 아웃라인을 사용하면 요소의 네 면에 서로 다른 아웃라인 너비, 스타일, 색상을 적용할 수 없지만 테두리에서는 요소의 네 면 모두에 제공된 값을 적용할 수 있습니다.
• 테두리는 요소 크기의 일부인 반면 윤곽선은 요소 크기의 일부가 아닙니다. 즉, 요소에 적용한 윤곽선의 두께는 중요하지 않으며 요소의 크기는 변경되지 않습니다.

테두리 속성을 이해하기 위해 예를 살펴보겠습니다.

예

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

산출

이제 두 가지를 모두 사용하는 또 다른 예가 있습니다. 개요 그리고 국경 속성.

예

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

산출