border-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
시도해 보기
border-width: thick; border-width: 1em; border-width: 4px 1.25em; border-width: 2ex 1.25ex 0.5ex; border-width: 0 4px 8px 12px; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: palegreen; color: #000; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; } 구성 속성
border-width는 단축 속성으로서 다음의 하위 속성을 포함합니다.
구문
css
/* 키워드 값 */ border-width: thin; border-width: medium; border-width: thick; /* <length> 값 */ border-width: 4px; border-width: 1.2rem; /* 세로방향 | 가로방향 */ border-width: 2px 1.5em; /* 위 | 가로방향 | 아래 */ border-width: 1px 2em 1.5cm; /* 위 | 오른쪽 | 아래 | 왼쪽 */ border-width: 1px 2em 0 4rem; /* 전역 키워드 */ border-width: inherit; border-width: initial; border-width: unset; border-width 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.
- 한 개의 값은 네 면 모두의 테두리 너비를 설정합니다.
- 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 너비를 설정합니다.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 너비를 설정합니다.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 너비를 지정합니다. (시계방향)
값
<line-width>-
테두리의 너비입니다. 0 이상의
<length>또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.thin얇은 테두리 medium중간 테두리 thick굵은 테두리 참고 : 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나
thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.
형식 정의
| 초기값 | as each of the properties of the shorthand:
|
|---|---|
| 적용대상 | all elements. It also applies to ::first-letter. |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand: |
형식 구문
border-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
예제
서로 다른 값의 조합
HTML
html
<p id="sval">한 개의 값: 모든 네 면이 6px 테두리</p> <p id="bival">두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리</p> <p id="treval">세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0</p> <p id="fourval"> 네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em </p> CSS
css
#sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } 결과
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
브라우저 호환성
같이 보기
- 테두리 관련 단축 속성:
border,border-style,border-color - 테두리 너비 속성:
border-bottom-width,border-left-width,border-right-width,border-top-width