CSS 테두리 너비(CSS border-width)

CSS border-width 속성

border-style 속성은 네 개의 테두리 너비를 지정한다.

너비는 특정 크기(px, pt, cm, em 등)로 설정하거나 미리 정의된 세 가지 값(thin, medium 또는 thick) 중 하나를 사용하여 설정할 수 있습니다:

몇가지 예제를 통해 속성값 등을 이해해보도록 하자.

p.one {
border-style: solid;
border-width: 5px;
}

border-style은 solid이고 border-width가 5px이다. 이에 대한 결과 화면이다.

css border-style solid border-width 5px 예시

p.two {
border-style: solid;
border-width: medium;
}

border-style은 solid이고 border-width가 medium이다. 이에 대한 결과 화면이다.

css border-style solid border-width medium 예시

p.three {
border-style: dotted;
border-width: 2px;
}

border-style은dotted이고 border-width가 2px이다. 이에 대한 결과 화면이다.

css border-style dotted border-width 2px 예시

p.four {
border-style: dotted;
border-width: thick;
}

border-style은dotted이고 border-width가 thick이다. 이에 대한 결과 화면이다.

css border-style dotted border-width thick 예시

CSS 테두리 - 측면 너비

border-width 속성은 1 ~ 4개의 값(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리 : 시계방향)을 가질 수 있다:

border-style은solid이고 border-width가 위쪽테두리에는 5px, 아래쪽테두리는 20px이다. 이에 대한 결과 화면이다.

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

<h2>border-width 속성</h2>
<p>테두리 너비 속성은 1 ~ 4개의 값(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리)을 가질 수 있습니다:</p>

<p class="one">테두리 테스트.</p>
<p class="two">테두리 테스트.</p>
<p class="three">테두리 테스트.</p>

</body>
</html>

p.one 클래스는 위/아래 5px, 측면(왼쪽, 오른쪽)은 20px이다.

p.two 클래스는 위/아래 20px, 측면(왼쪽, 오른쪽)은 5px이다.

p.three 클래스는 위 : 25px 오른쪽 : 10px, 아래쪽 : 4px, 왼쪽 : 35px 테두리 너비값을 갖느다.

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

지금까지 CSS 테두리 너비 값에 대해서 살펴보았다.

하나씩 실습을 하며 익히는 것을 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 단축 테두리 속성 (0)	2023.07.16
CSS 테두리 측면 속성 설정 (0)	2023.07.15
CSS border-color 속성 (0)	2023.07.12
CSS 테두리(CSS borders) (0)	2023.07.11
CSS background - shorthand 속성 (0)	2023.07.10