CSS 경계선 너비

CSS 경계선 너비

border-width 속성은 네 가지 경계의 너비를 지정합니다.

너비를 특정 크기로 설정할 수 있습니다.(px, pt, cm, em을 포함하여) 또는 다음 세 пред정의 값 중 하나를 사용할 수 있습니다.: thin, medium 또는 thick：

예제

다양한 경계 너비를 보여줍니다：

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: 중간;
}
p.three {
  border-style: 점선;
  border-width: 2px;
} 
p.four {
  border-style: 점선;
  border-width: 두꺼;
}

결과：

5px border-width

medium border-width

2px border-width

thick border-width

직접 시도해보세요

특정 테두리의 너비

border-width 속성은 한 개에서 네 개의 값을 설정할 수 있습니다. (상단 테두리, 우측 테두리, 하단 테두리, 좌측 테두리를 의미합니다):

예제

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 상단 테두리와 하단 테두리는 5px, 다른 테두리는 20px */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 상단 테두리와 하단 테두리는 20px, 다른 테두리는 5px */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 상단 테두리 25px, 우측 테두리 10px, 하단 테두리 4px, 좌측 테두리 35px */
}

직접 시도해보세요