Style borderWidth 속성

정의와 사용법

borderWidth 속성은 요소 경계선의 너비를 설정하거나 반환합니다.

이 속성은 하나에서 네 개의 값을 취할 수 있습니다:

  • 일치하는 값, 예를 들어: p {border-width: 두꺼운} - 모든 네 가지 경계선이 두꺼운
  • 두 가지 값, 예를 들어: p {border-width: thick thin} - 상하 경계선 두껍게, 좌우 경계선细细하게
  • 세 가지 값, 예를 들어: p {border-width: thick thin medium} - 상 경계선 두껍게, 좌우 경계선细细하게, 하 경계선 중간
  • 네 가지 값, 예를 들어: p {border-width: thick thin medium 10px} - 상 경계선 두껍게, 우 경계선细细하게, 하 경계선 중간, 좌 경계선 10px

추가로 참조하십시오：

CSS 강의：CSS 테두리

CSS 참조 설명서：border-width 속성

HTML DOM 참조 설명서：border 속성

인스턴스

예제 1

<div> 요소의 네 가지 경계선 너비를 변경합니다：

document.getElementById("myDiv").style.borderWidth = "thick";

직접 테스트해 보세요

예제 2

<div> 요소의 상하 경계선 너비를 두껍게,左右 경계선을细细하게 변경합니다：

document.getElementById("myDiv").style.borderWidth = "thick thin";

직접 테스트해 보세요

예제 3

<div> 요소의 네 가지 경계선 너비를 길이 값으로 변경합니다：

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";

직접 테스트해 보세요

예제 4

<div> 요소의 경계선 너비 반환：

alert(document.getElementById("myDiv").style.borderWidth);

직접 테스트해 보세요

문법

borderWidth 속성 반환：

object.style.borderWidth

borderWidth 속성 설정：

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
값 설명
thin 细细한 경계선을 정의합니다。
medium 중간 경계선을 정의합니다. 기본값。
thick 두꺼운 경계선을 정의합니다。
length 길이로 계산된 경계선 너비。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： medium
반환 값： 요소 경계선 너비를 나타내는 문자열。
CSS 버전： CSS1

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원